i'm trying achieve this: qhen button clicked, html animated down "welcome" section , overflow-y visible (so can't scroll down header if not pressing button). (that's first script). i'm having problems second script. scrolls , fix document @ height 0px , can't scroll down. i'm trying achieve here if scroll welcome section, html animated top of page (returning @ initial state).
$(window).ready(function() { $(".scroll-icon").click(function() { $('html, body').animate({ scrolltop: $("#welcome").offset().top }, 2000); $("html").delay(200).queue(function (next) { $(this).css({ 'overflow-y': 'visible' }); next(); }); }); $(window).scroll(function() { var distance = $("#welcome").offset().top if ($(document).scrolltop() < distance) { $('html, body').animate({ scrolltop: $("#header").offset().top }, 2000); } }); });
here's jsfiddle showing problem: https://jsfiddle.net/kp2yqyo8/6/
thanks :)
well tried this:
// 1. use flag check when you're welcome party!. window.imwelcome = false; // 2. event click handler -- same $(".scroll-icon").click(function() { $('html, body').animate({ scrolltop: $("#welcome").offset().top }, 2000); }); // 3. scroll handler... $(window).scroll(function() { // 3.1 store values var distance = $("#welcome").offset().top var scrolltop = $(document).scrolltop(); // 3.2 so..? did arrive party ? if(scrolltop == distance){ window.imwelcome = true; // 3.2.1 oh yeah! } // 3.3 hmmm ... seems want leave huh? ok let me take home if ($(document).scrolltop() < distance && window.imwelcome) { $('html, body').animate({ scrolltop: $("#header").offset().top }, 2000); // oh you're home , not welcomed window.imwelcome = false; } });
now, talking seriously, flag approach simple. used global variable because has keep state in flag.
Comments
Post a Comment