Question

我有一个来自CodyHouse的精彩常见问题模板..我想使用我网站的模板。但我的网站有一个固定的导航栏。这与固定的faq模板重叠。所以我想要的是调整常见问题模板的顶部位置。

这是一个屏幕截图，给人们更清楚的问题。感谢

Answer 1

查看您的网站 - 这是您可以做的。

（1）将div .stuck-nav移到.header-wrapper div之外，可能在.header-wrapper之上：

<body class="loaded">
    <div id="loader-wrapper">
        <!-- etc -->
    </div>

    <!-- Back to top -->
    <div class="back-to-top"><span class="icon-keyboard_arrow_up"></span></div>
    <!-- /Back to top -->

    <!-- mobile menu -->
    <div class="hidden"></div>

    <div class="stuck-nav">
        <!-- MOVE IT TO HERE -->
    </div><!-- .stuck-nav -->

    <div class="header-wrapper">
        <header id="header">
            <div class="container" style="margin-bottom: 20px;">
                <!-- etc -->
            </div>
        </header>
    </div>

然后，在CSS中，为.header-wrapper提供margin-top，例如：

.header-wrapper {margin-top: 250px;}

那应该这样做。

Answer 2

这是一个如何做到这一点的例子。

基本上，保留一个布尔变量来存储标题的位置（可见/不可见）。这样做的原因是为了防止.slideUp和.slideDown无需点击数千次。

使用$(window).scroll()跟踪滚动的位置，并根据需要显示或隐藏导航栏。

此外，我们在第一个body元素（导航后）上放置一个margin-top，将其推到导航栏下方。

＆＃13;

navviz = true, win = $(window), nav = $('nav');

win.scroll(function(){
  pos = win.scrollTop();
  
  if (navviz && pos > 100){
    navviz = false;
    nav.slideUp();
  }else if ( !navviz && pos < 100 ){
    navviz = true;
    nav.slideDown();
  }
});

＆＃13;

html,body{height:2000px;background:palegreen;}
nav{position:fixed;top:0;left:0;width:100%;height:40px;color:white;background-color:#333;padding:7px;}

#first_element{margin-top:60px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>Nav Menu goes here</nav>

<h1 id="first_element">A Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

<h1>Another Heading</h1>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>
<p>Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. Lots and lots of information. </p>

＆＃13;

Answer 3

尝试简单的CSS，

.navbar {margin-bottom:70px;} // set margin-bottom as it fits to your needs

希望这有帮助！

Jquery - 滚动到顶部调整位置

3 个答案: