關於single page website scrolling 問題

初步砌起個樣 http://119.246.188.169:8003/

但發覺click menu scroll 去相關嘅section 有少少問題。
當個page 第一次load 入,第一下就click menu link (完全唔scroll 個page), 個section title 就縮上去。
ds

之後點click 去任何section 都正常 scroll 到啱個位。


跟住我就不斷測試,發覺,因page scroll 落去時,個menu bar 就會自動stick to top (就係呢個問題),

當menu 末stick to top就scroll, 什麼原因導致可能末能得到正確的位置,因此title 就縮入去。
而因scroll 咗落去後,menu 就stick to top, 所以之後嘅scrolling 就能正確位置。

有咩辦法解決?

用咩front-end  framework ?

TOP

回復 2 #shing1630

bootstrap

via HKEPC Reader for Android

TOP

  1. $('a.page-scroll').bind('click', function(event) {
  2.     var $anchor = $(this);
  3.     $('html, body').stop().animate({
  4.         scrollTop: $($anchor.attr('href')).offset().top
  5.     }, 1500, 'easeInOutExpo');
  6.     event.preventDefault();
  7. });
複製代碼
你個 click event fire 時,個`$($anchor.attr('href')).offset().top`計法係包括咗個 header (menu) height。但當個 header 變咗 sticky 時用咗`position: fixed`,個 height 就唔計响 body 入面。

解決方法之一:header 幾時都用`position: fixed`,`section#about`個`margin-top` set 做 header height。

TOP

相關文章