CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Darren Bachan
Darren Bachan

Reputation: 743

Can't detect scroll to top if I'm in a fixed div

This issue felt a bit complex to replicate in a fiddle, so I have the issue here.

On the homepage if you scroll and then click on the logo it'll scroll you up just fine, but if you click onto a project and try to do the same thing it won't work. I believe it can't detect the scroll because once a project is active the containing div is fixed so it'll technically scroll what's beneath, which is the homepage.

Javascript

$("a[href='#top']").click(function() {
        $("html, body").animate({ scrollTop: 0 }, 700);
        return false;
});

CSS

#project {
    position:fixed;
    left:0;
    width:100%;
    height:100%;

    opacity:0;
    top:100%;
    background: #efefed;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
body.projectLoaded {
    overflow: hidden;
}
body.projectLoaded #project {
    opacity:1;
    top:0;
}
#project-container {
    overflow: auto;
    position: relative;
    height: 100%;
    padding-top: 60px;
}

Is there a way to still make this javascript function the way I want it to? I know the way it's built it may be difficult. In the #fixme div I was trying to do this How to make div fixed after you scroll to that div? and I believe for the same reason, why this won't work either.

UPDATE: So the solution was to add #project-container in the listener. How would I do it here?

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
});

Would it become (window, "#project-container")?

Upvotes: 1

Views: 190

Answers (1)

ezakto
ezakto

Reputation: 3194

$("a[href='#top']").click(function() {
        $("html, body, #project-container").animate({ scrollTop: 0 }, 700);
        return false;
});

Upvotes: 1

Related Questions