Question

当我滚过它时，我会尝试制作一个粘在顶部的div。但我有两个问题：

当滚动区域非常小（几乎没有滚动）时，它的闪烁和滚动是不可能的。
这是一个使用bootstrap的响应式和流畅的设计。当我向下滚动时，它会延伸到右侧的浏览器窗口大小。如何将粘性div限制为容器的大小？

这是粘性div的CSS：

.wrapper{
margin: 0 auto 0; 
top: 0;  
width:100%;
margin-bottom: 5%;
background-color:#fff;
border-top: 0;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
 box-shadow: 0 8px 6px -6px black;
}

粘性类：

.sticky {  
position: fixed;  
width: 100%;
margin: 0 auto 0;
top: 0;  
z-index: 100;  
border-top: 0;  
}

和js代码：

$(document).ready(function() {  
    var stickyNavTop = $('.wrapper').offset().top;  

    var stickyNav = function(){  
    var scrollTop = $(window).scrollTop();  

    if (scrollTop > stickyNavTop) {   
        $('.wrapper').addClass('sticky');  
    } else {  
        $('.wrapper').removeClass('sticky');   
    }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
    });

您可以在此处测试整个版本：http://labs.tageswoche.ch/budget/budget.html。

这是一个小提琴：http://jsfiddle.net/pc4sucms/

流体容器中的粘性div：闪烁并调整为完整的浏览器窗口问题

0 个答案: