Question

我有一个div position: fixed;，否则在某个时候向下滚动它有position: absolute;。我的问题是我的div的position: fixed;取决于我的页脚顶部。但是我的页脚顶部会发生变化，但不是我的div应该“固定”的部分的限制。也许代码会更清晰：

html：

<div id="header" style="height:500px; width:800px; border: 5px solid green; " >
    header
</div>

<div id="top" style="height:3000px; width:800px; border: 5px solid yellow; " >

    <button onclick="ReduceSize()"> Reduce size </button>

    <div id="comment" style="padding-bottom:30px; height:700px; width : 300px; margin-left:30px; border: 5px solid orange;" >  
    </div> 

</div>

<div id="bottom" style="height:3000px; width:800px; border: 5px solid green; " >
    footer
</div>

js：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
</script>

<script>
    function ReduceSize() {  
        var obj = document.getElementById('top');
        obj.style.height = "750px";
    }


    $(document).ready(function () {

    var haut = $('#comment').offset().top;
    var hautBottom = $('#bottom').offset().top - parseFloat( $('#comment').css('height').replace(/auto/, 0)  )  ; 

    $(window).scroll(function (event) {        
        var y = $(this).scrollTop(); 

        if(   (y >= (haut-20) ) && (y < hautBottom )     )  { 
            $('#comment').css({ position: 'fixed', top:20 });
        }else{
            if(y >= haut){  
                $('#comment').css({ position: 'absolute', top:hautBottom  });   
            }
            if(y < hautBottom ){  
                $('#comment').css({    position: 'absolute', top:parseFloat(   $('#top').offset().top)    });   
            };
        };
    }); 

});
</script>

提前致谢。

Answer 1

对我来说，这不是100％明确，你想要实现的目标，但我认为就是这样：

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
    function ReduceSize() {
        $(content).css('height', '600px');
        set_comment_position();
    }

    function set_comment_position(){

        var header  = $('#header');
        var comment = $('#comment');
        var footer  = $('#footer');
        var scroll  = $(window).scrollTop();
        var header_height           = header.outerHeight();
        var comment_height          = comment.outerHeight();
        var comment_distance_top    = header_height - scroll;
        var footer_offset_top       = footer.offset().top;
        var footer_distance_top     = footer_offset_top - scroll;
        var comment_distance_footer = footer_distance_top - comment_height;

        if (comment_distance_top <= 0) {
            if (comment_distance_footer > 0) {
                comment.css({
                    position: 'fixed',
                    top: '0px',
                    bottom : 'auto'
                });
            } else {
                comment.css({
                    position: 'absolute',
                    top: 'auto',
                    bottom: '0px'
                });
            }
        } else {
            comment.css({
                position: 'absolute',
                top: '0px',
                bottom : 'auto'
            });
        }
    }

    $(document).ready(function(){
        set_comment_position()
    });
    $(window).scroll(function(){
        set_comment_position();
    });

    </script>
</head>
<body>
    <div id="header" style="height:100px; width:800px; background-color: lightgreen; " >
    header
    </div>
    <div id="content" style="height:800px; width:800px; background-color: lightgrey; position: relative;" >
        <div id="comment" style="height:400px; width : 300px; background-color: orange; position: absolute; top: 0px;" >
            comment
            <button onclick="ReduceSize()"> Reduce size </button>
        </div>
    </div>
    <div id="footer" style="height:800px; width:800px; background-color: lightgreen; " >
        footer
    </div>
</body>
</html>

重点是将定位逻辑包装成一个单独的函数，并在docready上调用此函数，滚动并调整大小。

如何重新加载函数（事件）

1 个答案: