関数をリロードする方法（イベント）

position: fixed;のdivを持っている場合は、スクロールダウン時に特定の時刻に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

フッターの上部にオーバーレイする#commentを防止したいですか？ – 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>

ポイントは、1つの別個の関数に位置決めロジックをラップし、上でこの機能を呼び出すことですdocready、スクロール、サイズ変更

出典

2017-08-11 17:34:48 Benni

ありがとう、それは私が探していたものです！ –

関数をリロードする方法（イベント）

答えて

関連する問題