0

我一直在研究一些 jquery 来创建一个固定的导航（黄色块），它在滚动时会卡入到位（红色块）。

1）我遇到的问题是快照变得神经质，并且无法清晰显示所有图像。它会跳到页面的一半。

2）它不能跨浏览器工作，只有chrome......请帮忙？

这是我的工作小提琴。http://jsfiddle.net/f95sw/18/

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

<style>
#profile-container {
    padding-top:52px;
    /* Red bar height */
    margin:0;
    /* Clear default browser margin */
}
#profile-container.fixed {
    padding-top:82px;
    /* Red bar height + yellow bar height */
}
#profile-container {
    height:2000px;
}
#fixed-header {
    width:100%;
    position:fixed;
    height:50px;
    border:1px solid black;
    top:0px;
    background-color:red;
}
.container {
    height:300px;
    width:100%;
    background-color:blue;
}
.sticky-header {
    width:700px;
    height:50px;
    background:orange;
}
.sticky-header {
    height:30px;
    width:100%;
    background:yellow;
}
.fixed .sticky-header {
    position: fixed;
    top:52px;
    margin-bottom:52px;
}
.img {
    width:200px;
    height:200px;
    border:1px solid grey;
    float:left;
}
</style>
<script>
var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});
</script>
<body>

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>

</body>
</html>
4

2 回答 2

2

你在获取时犯了一个错误scrollTop()。

你滚动什么？浏览器窗口不是吗？

所以试试这个：

if ($(window).scrollTop() > offset.top - additionalPixels) {
    //your stuffs here
}

小提琴

对于其他浏览器，这似乎是错误的 jQuery。使用 jQuery-1.10，$(window).scroll() 在 IE 中不起作用（用 IE10 测试）。使用 jQuery-1.9，它可以工作！

使用 jquery-1.9 的FIDDLE 。

于 2013-10-14T14:43:28.457 回答
0

您可能需要进行一些更改，这280只是一个粗略的数字，但这个示例应该会有所帮助。

$(window).scroll(function () {
   if($(window).scrollTop() > 280){
      $('.sticky-header').css('top','52px');
      $('.sticky-header').css('position','fixed');
}
else{
    $('.sticky-header').css('top','auto');
    $('.sticky-header').css('position','static');    
}
});

http://jsfiddle.net/f95sw/22/

于 2013-10-14T15:11:29.850 回答