重庆SEO, 关注并探索SEO与WEB技术。针对用户体验,提供白帽SEO以及PHP网站建设以及运营服务。 详情

jQuery固定浮动侧边栏(jQuery fixed Sidebar)

发布于 作者 [重庆SEO]

更新于 2015-10-13

Markdown版本

这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可。

HTML代码:

<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

CSS代码:

body {
 margin: 10px auto;
 font-family: sans-serif;
 width: 500px;
}
div {
 border-radius: 5px;
 box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
 border: 1px solid #ccc;
 padding: 5px;
}
#sidebarWrap {
 height: 400px;
 width: 210px;
 float: right;
 position: relative;
 box-shadow: none;
 border: none;
 margin: 0;
 padding: 0;
}
#main {
 width: 270px;
 height: 4000px;
}
#footer {
 clear: both;
 margin: 10px 0;
}
#sidebar {
 width: 200px;
 height: 300px;
 position: absolute;
}
#header {
 height: 200px;
 margin-bottom: 10px;
}
#sidebar.fixed {
 position: fixed;
 top: 0;
}
#footer { height: 600px; }

JavaScript代码:

$(function() {
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar').outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('#sidebar').addClass('fixed').removeAttr('style');
            } else {
                $('#sidebar').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('#sidebar').removeClass('fixed');
        }
    });
});
分类:Jquery

Tags: jQuery, 侧边, 浮动,

本文标题: jQuery固定浮动侧边栏(jQuery fixed Sidebar)

本文地址: https://seonoco.com/blog/jquery-fixed-floating-sidebar-jquery-fixed-sidebar

版权说明: 本站遵循 CC BY-NC-SA 4.0 协议, 未表明转载信息均为原创或整理,转载或引用请注明出处,以便溯本求源。

补充说明: 本文在本站发布于2013-07-21,文中部分内容可能存在过时或不正确,请知晓!如果可以请留言告知。

本文是否有所帮助?
点赞
说一说
打赏