如何重新加載功能（事件）

我有一個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>

在此先感謝。

來源

2017-08-11 louis jean

您想阻止＃註釋覆蓋頁腳的頂部？ – Syden

這不是我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，滾動和調整大小。

來源

2017-08-11 17:34:48 Benni

非常感謝，這正是我所期待的！ –

如何重新加載功能（事件）

回答

相關問題