admin管理员组

文章数量:1315349

i've tried every single thing on the internet i could have find and as i'm a plete noob in js and am trying to learn some more plicated css i don't know why this scroll then fixed code is not working and don't know how to get it to work. Basically i have a header wrapper which includes header_pic of 373px height and header_nav which is 50 px in height. I just want to scroll to top of the header_nav and then set it to position fixed but every single one i used didnt work for some reason and i did include google's jQuery CDN in head area in my html page and then i included my external scrip.

Here's example of my webpage in jsfiddle: /

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
       $('#header_nav').css('position', 'static');
    }
});

Thanks for the patiance :D

i've tried every single thing on the internet i could have find and as i'm a plete noob in js and am trying to learn some more plicated css i don't know why this scroll then fixed code is not working and don't know how to get it to work. Basically i have a header wrapper which includes header_pic of 373px height and header_nav which is 50 px in height. I just want to scroll to top of the header_nav and then set it to position fixed but every single one i used didnt work for some reason and i did include google's jQuery CDN in head area in my html page and then i included my external scrip.

Here's example of my webpage in jsfiddle: https://jsfiddle/pyr2h0c5/

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
       $('#header_nav').css('position', 'static');
    }
});

Thanks for the patiance :D

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Jun 28, 2015 at 12:44 BozanicJosipBozanicJosip 5076 silver badges23 bronze badges 3
  • 3 Oh Jesus! where is jQuery? – Sudhansu Choudhary Commented Jun 28, 2015 at 12:54
  • Hey, small hint: take a look at the console log when your page loads and when you scroll. F12 > Console. Take a look at the errors, if any. Go from there. – lesssugar Commented Jun 28, 2015 at 12:58
  • When my page loads there is no errors but when i start scrolling down this thing appears: s2.postimg/aahsiy9mh/errors.png – BozanicJosip Commented Jun 28, 2015 at 13:03
Add a ment  | 

2 Answers 2

Reset to default 6

As far as I understood, you linked jQuery in your code and then included your script. You put the script in the <head> which makes your selected elements undefined at the time when the script runs, as they are rendered AFTER the script (like the #header_nav for example).

Error that's possibly thrown on scroll:

Uncaught TypeError: Cannot read property 'top' of undefined

Solution: Leave jQuery where it is but take your script out of <head> and put it right before the closing </body> tag. All should be peachy:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!-- Your HTML -->

<script type="text/javascript">
    var elementPosition = $('#header_nav').offset();

    $(window).scroll(function () {
        if ($(window).scrollTop() > elementPosition.top) {
            $('#header_nav').css('position', 'fixed').css('top', '0');
        } else {
            $('#header_nav').css('position', 'static');
        }
     });
</script>
</body>
</html>

You didn't include jquery in your jsfiddle, included it, and works...

jsfiddle

No code changes...

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
        $('#header_nav').css('position', 'static');
    }
});

Add something like 

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>

in your real page's <head>, or try to download jQuery to local and include it locally.

本文标签： javascriptScroll then fixedStack Overflow

版权声明：本文标题：javascript - Scroll then fixed - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741976181a2408134.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。