小格式問題與引導

Question

網站我的工作：zarwanhashem.com

1. 當我滾動頁面滾動太遠。如在，導航欄覆蓋頁面的第一個50px。我怎樣才能解決這個問題？我嘗試在滾動的js中添加-50，但是導致了導航欄的混亂。如在中，錯誤的部分在導航欄中被選中。

2. 對於手機版本，當我在導航菜單上選擇一個選項時，它不會自動收回。你必須自己摺疊它。

滾動JS：在文件

//jQuery to collapse the navbar on scroll 
$(window).scroll(function() { 
if ($(".navbar").offset().top > 50) { 
    $(".navbar-fixed-top").addClass("top-nav-collapse"); 
} else { 
    $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
} 
}); 

$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 

     if($($anchor).closest('ul').hasClass('dropdown-menu')){ 
      $($anchor).closest('ul').parent().siblings().removeClass('active'); 
      $($anchor).closest('ul').parent().addClass('active'); 
     }else{ 
      $($anchor).parent().siblings().removeClass('active'); 
      $($anchor).parent().addClass('active'); 
     } 
     event.preventDefault(); 
    }); 
}); 

JS，調整頁面大小，以便在下一部分中不從底部爬：

<script type="text/javascript"> 
    $(window).ready(function(){ 
    $('div[class^="content-section"]').css('min-height', $(window).height()); 
    }) 
    </script> 

我真的不我自己知道JavaScript。我會很感激任何幫助。

Answer 1

你不需要JS來設置高度，你可以使用純CSS。

.content-section: min-height:calc(100% - 50px); 

這應該爲你做，並允許50px的高度的導航欄。

Answer 2

試試這個代碼：

var elem = $(this); 
$('html, body').animate({ 
    scrollTop: $(elem).offset().top - 80 
}, 1500, 'easeInOutExpo');