Question

当我的父母到达窗口的顶部时，我正试图获得一个div以获得固定的定位，当它到达底部时失去它......出于某种原因，我可以得到它来获得固定的定位，但不要失去它。已经有一段时间了，我只是想弄明白......

到目前为止，这是我的代码。任何人都可以看到我遗失或搞砸的东西吗？

    $(window).bind('scroll',function(event) {
    $('.posthead').each(function(e) {
        var y = $(window).scrollTop();
        var windowHeightS = $('body').height();

        var postheadh = $(this).height() + 30;
        var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace('auto', 0));

        var postheight = $(this).parent('.type-post').height();
        var windowHeight = windowHeightS - top;

        //var top = getposition.top;

        var postTop = top - y;
        var postBottom = postheight + top - y;


        $(this).parent('.type-post').children('.debug').html('Position from top: <span>' + y + "</span> bottom: <span>" + postBottom + "</span>");


        if(postTop <= 0) { $(this).addClass('fixed'); }
        else if(postTop >= 0) { $(this).removeClass('fixed'); }

        if(postBottom <= 0) { $(this).removeClass('fixed'); }       
    });
});

Answer 1

我并不确切地知道你想做什么样的疯狂但是我已经根据你的代码到达页面底部后跳回到顶部的div。希望这正是你想要实现的目标。

我已经对您的代码进行了评论，因此您也可以为自己找出问题所在。

这是我创建的测试页面。我还有一些颜色编码的东西，以使事情更容易理解。

http://www.ferociouscoder.com/test.html

<style type="text/css">
html {
    background-color:#FFF;
    height:100%;
}
body {
    background-color:#CCC;
    height:1600px;
}
.posthead {
    background-color:#0FF;
    margin-top:auto;
}
.type-post {
    background-color:#FF0;
    height:500px;
}
.fixed {
    position:fixed;
    color:#F00;
}
</style>

<script>
$(window).bind('scroll',function(event) {
    $('.posthead').each(function(e) {
        var y = $(window).scrollTop(); //How much has the scrollbar on the right moved from the top.  Depends on size of scrollbar.
        var windowHeightS = $('body').height(); //600px;

        var postheadh = $(this).height() + 30; //postheadh = height of CHILD DIV + 30 (I don't know why this is so but ok)
        var top = $(this).offset().top;// - parseFloat($(this).css('margin-top').replace('auto', 0)); //How far is the child div away from the top of the page.


        var postheight = $(this).parent('.type-post').height(); //Height of the parent div
        var windowHeight = windowHeightS - top; //How far away is the top of the parent div from the botom of the body tag

        //var top = getposition.top;

        var postTop = top - y; //Since the position of the parent div is fixed.  This never changes.  It will be the value of the top margin of the body tag.
        var postBottom = postheight + top - y; //Since the position of the parent div is fixed.  This also never changes.  It will be the value of the height of the parent div + the constant above.

        $(this).parent('.type-post').children('.debug').html('Position from top: ' + y + " bottom: " + (windowHeightS-postheight) + "");

        if(y >= 0) { $(this).parent().addClass('fixed');} //postTop never changes! What you need is y I presume. Also you want it to stay fixed until it reaches the bottom.

        //else if(y >= 0) { $(this).removeClass('fixed'); } I commented this because it removed fixed positioning as soon as you're not at teh top of the screen.  When it gets to the bottom it tries to remove class fixed again (But you've already done so!)

        if(y >= (windowHeightS - postheight)) { $(this).parent().removeClass('fixed');}//postBottom never changes! what you need to see is if you've scrolled more than (or equal) the height of the parent container
    });
});
</script>
</head>
<body>
    <div class="type-post"><br>
        PARENT DIV 'TYPE-POST'<br>
        <div class="posthead debug">
            CHILD DIV 'POSTHEAD'<br>
        </div>
    </div>
</body>
</html>

使用/ jquery将固定标头保留在容器内

1 个答案: