如果行低於某個高度，則修復位置

是否可以修復表格的位置，使其與頁面「一起滾動」，但只能在某個值之後進行修改？如果行低於某個高度，則修復位置

我試圖實現類似於本網站上的標題：http://tf2trends.com/（單擊顯示所有，然後向下滾動）

來源

2012-06-21 Koh Jing Yu

這可以使用JavaScript和CSS與任何類型的元素來完成：

Have a div cling to top of screen if scrolled down past it

http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

來源

2012-06-21 04:14:07 Stecman

謝謝，我會考慮這一點。 –

是的，你可以很容易地通過使用一些CSS類和jQuery或JavaScript編程實現這一功能。

你必須調用某個滾動值的功能，您將通過jQuery的獲得很容易，然後更改CSS爲表格或DIV被稱爲position:fixed;top:0;

來源

2012-06-21 04:15:01

試試這個：

//keep element in view 
(function($) 
{ 
    $(document).ready(function() 
    { 
     var elementPosTop = $('#floatguy').position().top; 
     $(window).scroll(function() 
     { 
      var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); 
      //if top of element is in view 
      if (wintop > elementPosTop) 
      { 
       //always in view 
       $('#floatguy').css({ "position":"fixed", "top":"10px" }); 
      } 
      else 
      { 
       //reset back to normal viewing 
       $('#floatguy').css({ "position":"inherit" }); 
      } 
     }); 
    }); 
})(jQuery);

HTML：

<div> 
    Content before floating text<br/> 
    Content before floating text<br/> 
    Content before floating text<br/> 
</div> 
<div id="floatguy"> 
    <span>Floating Header</span> 
</div> 

<div id="longguy"> 
     Other text <br/> 
     Other text <br/> 
     Other text <br/> 
</div>

jsFiddle example

來源

2012-06-21 04:17:24

下面是問題中引用的網站所使用的方法，在不使用框架的情況下實現（並用過多的評論來試圖解釋發生了什麼）。這不是獲得效果的最好/最簡單/最簡單的方法，但我希望從學習的角度看純粹的js網站的方法是有用的。（僅適用於Chrome 19.0和Firefox 13.0測試，無論是在Mac上。）

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Table With Scrolling Head</title> 
    <style type='text/css'> 
     #scrollTable{ 
     margin-top:100px; /* not necessary for scrolling, just to give a little padding */ 
     } 

     #scroller { 
     z-index: 100; /* this number needs to be larger than any other z-index on the page */ 
     } 
    </style> 
    </head> 
    <body> 
    <table id='scrollTable'> 
     <thead id='scroller'> 
    <tr> 
     <th>I don't leave the screen</th> 
    </tr> 
     </thead> 
     <tbody> 
    <tr><td>I do!</td></tr> 
    <tr><td>I do!</td></tr> 
    <!-- ... add more <tr><td>I do!</td></tr> lines to make the page long enough to scroll --> 
    <tr><td>I do!</td></tr> 
     </tbody> 
    </body> 
<script type='text/javascript'> 
function getDistFromTop(e){ 
    /* get the offset of element e from the top (including the offset of any elements it is nested in)*/ 
    y = e.offsetTop; 
    e = e.offsetParent; 
    while (e != null){ 
     y = y + e.offsetTop; 
     e = e.offsetParent;    
    } 
    return y; 
} 

function scroll() { 
    var scroller = document.getElementById('scroller'); 
    var tab = document.getElementById('scrollTable'); 

    if (window.pageYOffset > getDistFromTop(tab)){ /* if the page has been scrolled farther than the distance the table is from the top... */ 
     scroller.style.position = 'fixed'; /* fix the position of scroller so it doesn't move with the page */ 
     scroller.style.top = '0px'; /* put scroller on the top of the page */ 
     tab.style.paddingTop = '20px'; /* add padding to the top of the table; this is done to make the table body stay where it is expected (otherwise it would move because scroller, the table header, has become fixed) */ 
    } else { /* if the page scrolls back so that the whole table is on the page, reset everything to their original values so the page behaves "normally" */ 
     scroller.style.position = 'relative'; 
     scroller.style.top = ''; 
     tab.style.paddingTop = '0px'; 
    } 
} 

window.onscroll = scroll; 
</script> 
</html>

來源

2012-06-21 05:30:50

如果行低於某個高度，則修復位置

回答

相關問題