CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zial
Zial

Reputation: 70

Jquery - Scroll to Top adjust position

I have a great FAQ Template from CodyHouse.. and i want to use the template of my site . but my site has a fixed navbar. which is overlapping the fixed faq template . so all i want is adjust the top position of the faq template.

Here's a screenshot , to more cleared question to guys . thanks

enter image description here

Upvotes: 0

Views: 129

Answers (3)

cssyphus
cssyphus

Reputation: 40096

Looked at your site - here's what you can do.

(1) Move div .stuck-nav outside of the .header-wrapper div, perhaps just above .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>

Then, in the CSS, give .header-wrapper a margin-top, such as:

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

And that should do it.

Upvotes: 1

Sami
Sami

Reputation: 3800

Try simple css,

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

Hope this helps!

Upvotes: 0

cssyphus
cssyphus

Reputation: 40096

Here is an example of how you can do it.

Basically, keep a boolean variable to store the position of the header (visible/invisible). The reason for this is to prevent the .slideUp and .slideDown from firing thousands of times without need.

Use $(window).scroll() to keep track of where the scroll is at, and show or hide the navbar as required.

Also, we put a margin-top on the first body element (after the nav) to push it down below the nav.

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();
  }
});
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;}
<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>

Upvotes: 0

Related Questions