JQuery Position:Fixed 'NAVBAR' by scrolling the page

dcdeiv

Basically I want my NAVBAR to stay at the top of the window position:fixed as soon as the #CONTENT DIV under the NAV get to the top of the window.

The HTML is

<header>
Which is full screen size: 100% x 100%
</header>

<nav>
</nav>

<div id="content">
<section>
</section>

<footer>
</footer>
</div>

Here you can find the DEMO http://jsfiddle.net/dcdeiv/aG6DK/2/ Everything works fine, except the jQuery code.

I tried to create a variable from the return of the height value of the #contentDiv while scrolling. I wanted to use that variable to make the NAV fadeIn or fadeOut as soon as the #contentDiv reaches the top of the window but it does not work

$(document).scroll(function () {
    var x = $('#content').scrolltop();
    if (x = 0) {
        $('nav').fadeIn().css({"position":"fixed","top":"0"});
    } else {
        $('nav').fadeOut();
    }
});

Can you please help me? It is the first time with jQuery to me, so please be indulgent and explain me all of my mistakes!

plus I am Italian so don't be grammar nazi! LOL

Thank you.

zsaat14

Here is the code that I got to work:

$(document).ready(function() {
    $(document).scroll(function () {
        var scroll = $(this).scrollTop();
        var topDist = $("#container").position();
        if (scroll > topDist.top) {
            $('nav').css({"position":"fixed","top":"0"});
        } else {
            $('nav').css({"position":"static","top":"auto"});
        }
    });
});

DEMO

These are the syntactical mistakes:

  • .scrolltop() should be .scrollTop()
  • if(x = 0) should be if(x == 0) (or not, see above code)

Also, in jsfiddle, you have to specify a library in the upper left hand corner in order for jQuery to work.

jsfiddle jQuery library

Your logic also needs a little help.

  1. .scrollTop() only gets the position of the scroll bar of the page. This means that it starts off at 0. Thus, the code you have would stick the navigation to the top as soon as the user tried to scroll.
  2. We need the nav to stick once it has reached the top, so we need to know how far it is from the top. var topDist = $("#container").position(); creates an object that has both the `top` and `left` properties of the container. We can then retrieve the top by topDist.top.
  3. Now that we have the scroll position (.scrollTop) and how far down the page the `nav` is, we can compare the two and then run your original actions.

As a side note, your fadeIn() and fadeOut() are not really necessary. I am not quite sure what you were trying to accomplish, but you can just omit them.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Prevent page scrolling to top upon adding fixed position

From Dev

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

From Dev

Fixed position element is flashing in Chrome when scrolling

From Dev

position: fixed overlapping page

From Dev

Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

From Dev

Position fixed sidebar with overflow scroll not scrolling to bottom

From Dev

Position fixed acting like position relative ( scrolling with page )

From Dev

Jquery mobile popup is being reopened in wrong position on page resizing or scrolling

From Dev

jQuery infinite scrolling scrolling in fixed div

From Dev

Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element

From Dev

#sidebar position:fixed at certain scrolling

From Dev

Scrolling with a button which should have a fixed position

From Dev

macgap scrolling issue when position fixed

From Dev

How to detect scrolling in div when position is fixed

From Dev

Flex Layout with fixed position (no scrolling) sidebar

From Dev

How to disable background content scrolling in position fixed

From Dev

Horizontal scrolling not working when position absolute/fixed

From Dev

Javascript smooth scrolling with fixed navbar offset

From Dev

Fixed Page Scrolling

From Dev

Overflow scrolling not working on position fixed element iOS

From Dev

How to Stop Jumping Position fixed element on scrolling

From Dev

jQuery infinite scrolling scrolling in fixed div

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element

From Dev

Horizontal scrolling jQuery fixed navigation

From Dev

jQuery Mobile Dialog Page - Fixed Position Header

From Dev

Position absolute but with fixed scrolling

From Dev

Need a CSS solution to stay top left with page scrolling (not position:fixed)

From Dev

Fixed navbar covered by rest of the page when scrolling down

Related Related

  1. 1

    Prevent page scrolling to top upon adding fixed position

  2. 2

    Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

  3. 3

    Fixed position element is flashing in Chrome when scrolling

  4. 4

    position: fixed overlapping page

  5. 5

    Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

  6. 6

    Position fixed sidebar with overflow scroll not scrolling to bottom

  7. 7

    Position fixed acting like position relative ( scrolling with page )

  8. 8

    Jquery mobile popup is being reopened in wrong position on page resizing or scrolling

  9. 9

    jQuery infinite scrolling scrolling in fixed div

  10. 10

    Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element

  11. 11

    #sidebar position:fixed at certain scrolling

  12. 12

    Scrolling with a button which should have a fixed position

  13. 13

    macgap scrolling issue when position fixed

  14. 14

    How to detect scrolling in div when position is fixed

  15. 15

    Flex Layout with fixed position (no scrolling) sidebar

  16. 16

    How to disable background content scrolling in position fixed

  17. 17

    Horizontal scrolling not working when position absolute/fixed

  18. 18

    Javascript smooth scrolling with fixed navbar offset

  19. 19

    Fixed Page Scrolling

  20. 20

    Overflow scrolling not working on position fixed element iOS

  21. 21

    How to Stop Jumping Position fixed element on scrolling

  22. 22

    jQuery infinite scrolling scrolling in fixed div

  23. 23

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  24. 24

    Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element

  25. 25

    Horizontal scrolling jQuery fixed navigation

  26. 26

    jQuery Mobile Dialog Page - Fixed Position Header

  27. 27

    Position absolute but with fixed scrolling

  28. 28

    Need a CSS solution to stay top left with page scrolling (not position:fixed)

  29. 29

    Fixed navbar covered by rest of the page when scrolling down

HotTag

Archive