js实现页面悬浮框

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.

当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        display:none;
    }

</style>
<script type="text/javascript">
window.onscroll=function(){
    var t=document.documentElement.scrollTop||document.body.scrollTop;
    var div2=document.getElementById("div2");
    if(t>= 100){
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    }
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>
时间: 2024-10-12 02:50:36

js实现页面悬浮框的相关文章

Js实现一键分享效果--悬浮框状态

一.html框架 /*整个分享区域*/    <div id="share">         /*分享区域的顶端文字描述*/              <h3><img src="../img/chaohao.png">分享到...</h3>         /*分享区域的的具体分享网站链接*/              <ul>                    <li><a hr

“右侧悬浮框”页面特效

功能描述: 悬浮框固定在页面右下方,随着滚动条的滚动,悬浮框运动到固定位置. 实现效果: 编码思路: 获取滚动条滚动时,方块需要移动的目标位置(可视区域的高度-物体高度-滚动的高度). 套用运动框架. 示例代码:

(40)JS运动之右下角悬浮框

<!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:100px; height:150px; background:red; position:absolute; right:0; bottom:0; } </style> <s

(41)JS运动之右侧中间悬浮框(对联悬浮框)

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:100px; height:150px; background:red; position:absolute; right:0; bottom:0; } </style> <script> windo

js右侧悬浮框

示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px"; 知识点: 浏览器窗体的高度 document.documentElement.clientHeight 浏览器滚动的高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollT

博客园随笔中添加目录导航悬浮框

1,在博客园设置中申请js权限,写明申请理由大约2-3小时通过 2,通过后在后台设置中添加CSS代码 /*生成博客目录的CSS*/ #uprightsideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/ top:50px; righ

JavaScript侧边悬浮框

<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; star

Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现在情况为: ? 问题分析: 公司有各种型号电脑,X230,W530,X240,业务部门多使用x240, 这一款笔记本屏幕带有触摸屏功能,其他型号没有.所有操作系统都为win8,IE10小版本号也一致. 最初就将问题定位为触摸屏引起了这个问题,但一直无法找到具体原因.因为在chrome,firfox等

移动端悬浮框可移动,可回弹,Vue and React

一,首先讲 React的悬浮框 示例,可参照链接 Demo文档,可参照链接 1. 安装 npm install suspend-button -S 2. 使用 import React, { Component } from 'react' import ReactDOM from 'react-dom' import SuspendButton from 'suspend-button' class App extends Component { render() { return ( <Su