html - Bootstrap 的小格式问题

Question

我正在处理的网站:zarwanhashem.com

1. 当我滚动页面时，页面滚动得太远。与此类似，导航栏覆盖了页面的前 50 像素。我怎样才能解决这个问题？我尝试将 -50 添加到滚动 js，但这弄乱了导航栏。就像在导航栏中选择了错误的部分。

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。