Question

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

当我滚动页面滚动太远时。如同，导航栏覆盖了页面的前50px。我怎样才能解决这个问题？我尝试在滚动的js中添加-50，但这会弄乱导航栏。如同在，导航栏中选择了错误的部分。
对于移动版，当我在导航菜单上选择一个选项时，它不会自动缩回。你必须自己崩溃。

滚动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');

引导程序的小格式问题

2 个答案: