1. div随滚动条浮动置顶
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<title>div随滚动条滚动置顶</title>
<style type="text/css">
#floatMenu {
    width: 1200px;
    height: 50px;
    background-color: #000;
}
.fixedFloat {
    position: fixed;
    top: 10px;
}
</style>
</head>
<body>
<div >
    <div ></div>
    <div id="floatMenu" >随滚动条滚动置顶</div>
    <div ></div>
</div>
<script type="text/javascript">
    var name = "#floatMenu";
    var menuYloc = null;
    $(document).ready(function() {
        menuYloc = 300;
        $(window).scroll(function() {
            if ($(document).scrollTop() <= menuYloc) {
                $("#floatMenu").removeClass("fixedFloat");
            } else {
                $("#floatMenu").addClass("fixedFloat");
            }
        });
    });
</script>
</body>
</html>
2、jquery滚轮停止事件
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(e) {
    //让scroll事件在滚动条停止时响应
    var timeout = false; 
    $(window).scroll(function(){ 
        if (timeout){clearTimeout(timeout);} 
        timeout = setTimeout(function(){ 
            console.dir(1); 
        },500); 
    });
});
</script>
<title>jquery滚轮停止事件</title>
</head>
<body>
<div id="my_elem" ></div>
</body>
</html>
3、自适应宽度的页面中，右侧div随滚动条浮动置顶。浏览器窗口改变大小时，div自动适应宽度。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<title>jquery滚动条触发事件</title>
jquery弹出div窗口</head>
<body>
<div id="div1">
    <div id="left" >left</div>
    <div id="right" >right</div>
</div>
<script type="text/javascript">
    //右侧随滚动条浮动
    var name = "#right";
    var menuYloc = null;
    //当浏览器窗口大小改变时，设置右侧滚动条的宽度和margin-left
    //适用于自适应页面
    size = function () {//浏览器窗口改变大小事件
        changeDivWidth();
    }
    function changeDivWidth() {
        var h_left = $("#left").width();//左侧div宽度
        var m_left = Number(h_left) + 20;//加上间距20px
        $(name).css("margin-left", m_left);//设置margin-left
        var m_w = Number($("#div1").width()) - Number(m_left) - 30;//宽度为父div减去左侧div宽度再减去margin
        $(name).css("width", m_w);//设置宽度
    }
    $(document).ready(function () {
        changeDivWidth();
        var menuYloc = $(name).css("top") || '';
        menuYloc = parseInt(menuYloc.substring(0, menuYloc.indexOf("px")));
        $(window).scroll(function () {
            var h_left = $("#left").width();//左侧div宽度
            var s_left = $(document).scrollLeft();//滚动条左距离
            if ($(document).scrollTop() <= 20) {
                $(name).css("position", "absolute");
                $(name).css("top", "auto");
                var m_left = Number(h_left) + 20;
                $(name).css("margin-left", m_left);
            } else {
                $(name).css("position", "fixed");
                $(name).css("top", 0);
                var m_left = Number(h_left) - Number(s_left) + 20;
                $(name).css("margin-left", m_left);
            }
        });
    });
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。