Div滾動後固定

美好的一天。我想問如何改變窗口頂部的距離。因爲如果DIV達到頂部，條件就會運行。在條件運行之前，我希望距離窗口頂部大約20個像素的距離。Div滾動後固定

這裏是我的樣品JS：https://jsfiddle.net/o00kzsrb/1/

function UpdateTableHeaders() { 
     $(".panel").each(function() { 
      var el   = $(this), 
      offset   = el.offset(), 
      scrollTop  = $(window).scrollTop(), 
      floatingHeader = $(".floatingHeader", this) 

      if ((scrollTop > offset.top) && (scrollTop < offset.top + el.heigh())) { 
       floatingHeader.css({ 
        "visibility": "visible" 
       }); 
      } else { 
       floatingHeader.css({ 
        "visibility": "hidden" 
       });  
      }; 
      }); 
    } 

    // DOM Ready  
    $(document).ready(function() { 
     var clonedHeaderRow; 
     $(".panel").each(function() { 
      clonedHeaderRow = $(".panel-heading", this); 
      clonedHeaderRow 
      .before(clonedHeaderRow.clone()) 
      .css("width", clonedHeaderRow.width()) 
      .addClass("floatingHeader"); 

     }); 
     $(window) 
     .scroll(UpdateTableHeaders) 
     .trigger("scroll");

來源

2015-07-13 clien

這將設置floatingHeader可見20px的它的面板之前就按窗口的頂部。如果你希望它是20px之後，改爲+20。

$(window).scroll(function (e){ 

     var scrollTop = $(window).scrollTop(); 

     $(".panel").each(function() { 

      var el   = $(this), 
      offset   = el.offset(), 
      floatingHeader = $(".floatingHeader", el); 

      var visibility = scrollTop > (offset.top - 20) 
          && scrollTop < offset.top + el.height()? 
          "visible" : "hidden"; 

      floatingHeader.css({"visibility": visibility}); 

     }); 
    });

來源

2015-07-13 03:46:54

如果我插入代碼，是否需要擦除函數UpdateTableHeader中的條件？ – clien

另外，你可能想進行一些額外的優化，比如將scrollTop變量拉到每個之外（它不會改變），並傳遞el而不是this作爲上下文參數，因爲這個函數會觸發很多。 –

我想我明白你現在要問什麼。如果.floatingHeader的包含.panel的窗格頂部低於20px，或者用戶已將20px滾動到面板中，它們是否可見？ –

Div滾動後固定

回答

相關問題