Conflicting Jquery - ScrollTop()

133 views Asked by At

I am having trouble getting these two snippets to work. The first block works when the second block is not present. The second block works regardless.

Block one is to smooth scroll any links linked to anchors in the page. Block two is for a sticky nav I have.

I am guessing there is an issue as they both use scrollTop().

So at the moment with both of these blocks of code in the page the smooth scroll only works on on anchors lower down the page, and not up (E.g. Top the top Button). So it effectively only works on downwards scroll links and not upward...

$(document).ready(function() {

    $('a[href^="#"]').on('click', function(event) {
        var target = $($(this).attr('href'));
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });


    var stickyNavTop = $('#head-nav-cont').offset().top;
    var stickyNav = function(){
    var scrollTop1 = $(window).scrollTop();

        if (scrollTop1 > stickyNavTop) { 
            $('#head-nav-cont').addClass('sticky');
            //$('#home-slideshow').addClass('stickied');
        } else {
            $('#head-nav-cont').removeClass('sticky'); 
            //$('#home-slideshow').removeClass('stickied'); 
        }
    };

    stickyNav();

    $(window).scroll(function() {
        stickyNav();
    });

});
0

There are 0 answers