ive wrote a simple script that isnt working as intentioned:
var prevscroll = 0;
$(document).scroll(function(){
var currscroll = $(document).scrollTop();
if(currscroll > prevscroll){
$("header").toggle();
prevscroll = currscroll;
}
if(currscroll < prevscroll){
$("header").toggle();
prevscroll = currscroll;
}
});
When the page is scrolled down, its meant to hide the header and only show it if its scrolled up however whats happening is as i scroll down its flicking on and off. :|
I think I may of just spotted a silly error! ofcourse its going to keep flickering since prev scroll keeps increasing.
You can't use toggle() the way you are because the scroll event is called many, many times so if it's called more than once with the same value for your if statement, then it will flicker on, then off, then on, then off each time you call .toggle(). You need to explicitly hide or show when your condition is met.
I don't quite follow exactly what you're trying to do with prevscroll, but perhaps this is what you want:
var prevscroll = 0;
$(document).scroll(function(){
var currscroll = $(document).scrollTop();
if(currscroll > prevscroll){
$("header").hide();
prevscroll = currscroll;
}
if(currscroll < prevscroll){
$("header").show();
prevscroll = currscroll;
}
});
This will hide the header anytime you are scrolling down further and show the header as soon as you start to scroll up.
Related
I'm making a slide scrolling page, and I'm trying to have it scroll like you're pulling a notecard up and with the next one right behind it.
To do this, I'm making them all fixed, and then moving their "top" position based off of scroll. But then I also need to make the body the size of the panel.
It's hard to describe what I'm doing, so here's the demo: https://codepen.io/NotDan/pen/vzraJE
Here's the particular piece of code that's causing my problem:
//what's going on here?
$(window).scroll(function(){
var panelNum = parseInt($(window).scrollTop()/$(window).height());//detemines panel number
var pixelMovement = ($(window).scrollTop())-(panelNum*$(".panel").height()); determines how many pixels to move the panel by
$('body').find(".panel:eq("+panelNum+")").css("top", -1*pixelMovement);
});
The problem is when the user scrolls quickly, the top position is not set accurately and there's some overhang. Again, hard to explain, but if you jump to the demo and scroll quickly you'll see what I mean.
Is there a more precise way of measuring scroll? Or is there a better way to do what I'm trying to? I've tried scrollmagic, and its "section wipe" feature is really close, but they bring the previous one up rather than move the current one up.
I tried making a condition to determine the panel number and everything started working.
var panelNum = 0;
var pixelMovement = 0;
$(window).scroll(function () {
pixelMovement = $(window).scrollTop() - panelNum * $(".panel").height(); // determines how many pixels to move the panel by
$("body")
.find(".panel:eq(" + panelNum + ")")
.css("top", -1 * pixelMovement);
if (Math.abs(pixelMovement) >= $(window).height()) {
panelNum++;
} else if (pixelMovement <= 0) {
panelNum--;
}
});
Here's the working demo: https://codepen.io/NotDan/pen/RYJeZq
Problem:
I'm trying to fadeIn and fadeOut div class="audioBox" once the user scrolls past the header. What I have seems to work fine, except for when the page is loaded and I'm already past the 835px height of the header/
Q: What I'm seeing is when I scroll the audioBox quickly fades in and then fades out, despite scroll >= header How do I prevent this from happening?
scripts.js
// If the reader scrolls past header, show audioBox
var scroll = $(window).scrollTop();
var header = $("header").height();
if (scroll >= header) {
$(".audioBox").fadeIn();
} else if (scroll <= header) {
$(".audioBox").fadeOut();
}
I tried implementing what you're describing in jsfiddle at http://jsfiddle.net/3wqfp2ch/1/.
I'd approach it a bit differently, based on the following ideas:
I personally prefer letting CSS take care of visual stuff via classes, and let jQuery take the simple responsibility of controlling when the classes should be added/removed. I think it makes for a better relationship between the two systems and allows each to do their thing better & more neatly.
I didn't see where you were listening for scroll events on the window, which is essential for figuring out whether a user's scroll position is before or after the header, so have included this in my code
I don't think we need multiple if conditions - there's just one question: "Is the scroll position greater than the header height?".
Here's the JS:
var headerHeight = $("header").height();
var audioBox = $('#audioBox');
$(window).on('scroll', function(){
var scrollPosition = $(window).scrollTop();
if (scrollPosition > headerHeight) {
audioBox.addClass('is-visible');
} else {
audioBox.removeClass('is-visible');
}
});
Check out my fiddle at http://jsfiddle.net/3wqfp2ch/1/ for the HTML & CSS that this relates to, and the working demo putting it all together.
I can't test whether this suffers from the same issue regarding you loading at a point already past the header height from jsfiddle unfortunately, but I wouldn't be expecting the behaviour you described using the code above.
Let me know how you get on!
Calling .fadeIn() or .fadeOut() all the time and having an overlap in the conditions might be the problem.
Try this:
// If the reader scrolls past header, show audioBox
var scroll = $(window).scrollTop();
var header = $("header").offset().top + $("header").height(); // should include the header's offset as well
if (scroll >= header) {
$(".audioBox:hidden").fadeIn();
} else if (scroll < header) {
$(".audioBox:visible").fadeOut();
}
I'm working on a page with a simple side nav that has a fixed position, set top: 30%. What I need to happen is at the bottom of the page I want to fade the menu out so it doesn't overlap the footer, the code below works but I think it is checking on scroll so much it takes to long to calculate when you scroll down fast.
Is there a faster/more lightweight way to calculate when to hide the side-nav? I'm not familiar with debouncing but would it help?
Elements:
.body-container-wrapper - total height of page
.footer-container-wrapper - total height of the footer that we want the nav to be hidden at
.internal-side-nav - the menu position: fixed, top: 30%, right: 0
Example Page: http://hsb1.hubspot.com/profile-page-template
Script:
<script type="text/javascript">
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y < $('.body-container-wrapper').outerHeight() - $('.footer-container- wrapper').outerHeight() - 400 ) {
$('.internal-side-nav').fadeIn();
} else {
$('.internal-side-nav').fadeOut();
}
});
</script>
I hadn't heard of debounce so I had to look it up. It could potentially help, but that would be an extra plugin you'd have to include and maintain and it might not work exactly how you want (I didn't see anything indicating that it does "bunches or time frames", just seemed to be bunches, which means it might fire late on you).
Instead, what you could do is throttle it yourself with a little bit of timing.
var scrollTimeInterval = 200; // how often we allow the action to trigger, in ms.
var lastScrollTime = 0;
var scrollTimeoutId = null;
$(document).scroll(function () {
var now = (new Date()).getTime();
var dScrollTime = now - lastScrollTime;
lastScrollTime = now;
if (dScrollTime < scrollTimeInterval) {
// Set a timeout so we catch the last one.
scrollTimeoutId = setTimeout(function() { $(document).scroll(); }, scrollTimeInterval - dScrollTime);
return; // too soon, so we'll skip
}
// Clear any potentially pending timeout.
clearTimeout(scrollTimeoutId);
var y = $(this).scrollTop();
if (y < $('.body-container-wrapper').outerHeight() - $('.footer-container- wrapper').outerHeight() - 400 ) {
$('.internal-side-nav').fadeIn();
} else {
$('.internal-side-nav').fadeOut();
}
});
With this, the scroll event simply won't do anything if it hasn't been a certain amount of time since it last triggered. To ensure we catch the last scroll event (the last one before they stopped scrolling), I added a timeout which will trigger the scroll event one last time. We also have to make sure to clear that if we handle another scroll event before it fires (so we don't double up on it).
You can control the time interval it allows with the first variable. If 200ms feels a bit sluggish, you can reduce it to 100ms or 50ms and see if that gives a better balance.
Hope that helps.
Dealing with scroll events, in certain circumstances, there's not much you can do.
Solution 1: setTimeout that cancels itself on each iteration
This method is most efficient I believe, but maybe not ideal for you, because there will still be 300ms in which the sidenav would visually overlap the footer before it fades out.
var scrollTimeout = false;
$(document).scroll(function(){
clearTimeout(scrollTimeout);
var _this = this; // for the setTimeout function to know what "this" is
scrollTimeout = setTimeout(function(){
// your original code block goes here
// BUT, replace "this" with "_this"
}, 300);
});
The above essentially only runs your code when the user has not scrolled for at least 300 milliseconds.
Solution 2: Just good old optimization (not too many tricks)
This solution should hide the sidenav immediately, but still runs on every scroll, just does less
var myScrollEvent = (function(){
var $win = $(window);
var $foot = $('.footer-container-wrapper');
var footer_top = $foot.offset().top; // where on the page the footer begins
var $nav = $('.internal-side-nav');
var nav_height = $nav.height(); // maybe use outerHeight(true)?...who knows, only you
var is_hidden = false;
// this is the actual function we want to run on-scroll
return function(){
// jquery, even on fixed elements, still seems to account for scroll position
// when calculating top offset value, below is the coordinate of the bottom of the nav
var nav_bottom = $nav.offset().top + nav_height;
// if the bottom coord of the nav is lower than the top coord of the footer
if(nav_bottom > footer_top && !is_hidden){
is_hidden = true;
// hide it code
}else if(is_hidden){
is_hidden = false;
// show it code
}
};
})();
$(window).scroll(myScrollEvent);
The idea here is to cache some variables and also do the calculation a slightly different way. Your way doesn't seem by any means wrong, but this is just an alternative. Note that with this method, we're assuming the nav height will never change.
You could always combine the two solutions if you'd like as well.
Also, note that I haven't done any browser-2-browser testing, so if there are any flaws, of course let me know.
I have a sticky nav I'm working on, I was able to gather some code from some other posts, however I'm running into one issue, the nav area I'm hiding after scroll won't show back up when scrolling to the top of the page. I attempted to write an else if statement, but no luck, thanks.
$(window).scroll(function(){
if($("#navheader").offset().top <= $(window).scrollTop)
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
This might be easier
Looks like the issue was that you need a () after scrollTop on window.
var n = $("#navheader");//get nav
var nh = n.offset().top;//get nav offset
var go = true;//toggle execute so it doesn't fire on every match
$(window).scroll(function(){
var wh = $(this).scrollTop();//window scroll
if(wh <= nh && !go) {//show
n.show();
go = true;
} else if (wh > nh && go) {//hide
n.hide();
go = false;
}
});
made a fiddle: http://jsfiddle.net/filever10/cxJ6a/
edit: added a go toggle to stop fire on every match of the if/then. this way it fires once each way.
If you console.log:
console.log($("#navheader").offset().top)
On the scroll event, you will see that once the IF statement becomes true it will return always 0. Since the element is fixed and it has top: 0 it will always have 0.
The solution you ask?
Make the offest global variable and check it.
var navOff = $("#navheader").offset().top;
$(window).scroll(function(){
if(navOff <= $(window).scrollTop())
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
But since your $("#navheader") is probably set to display: none and it will probably return 0 even this way...
So you have a few options.
Make some holder of the navigation and target it's offest.
Hard code the value.
Make it visibility: hidden; instead of display: none; (that way you can target the offest)
I have a navigation container near the top of the page that should add or remove the classname "stuck" (switching between position:static and position:fixed) when the page scrolls beyond a certain value. Seems to work fine in FF and Chrome, but of course IE (7,8 and 9) is having trouble.
The page lags heavily (essentially unusable) when scrolling using the mousewheel, although if I grab and drag the horiz scrollbar then the page slides smoothly with no lag.
My searching around revealed that it's probably because IE executes way more scroll events than the other browsers, but I can't figure out exactly how to throttle the number of events being fired. You can see in the code block below that I'm also using a 'scroll stop' solution but I really need to also be able to execute a callback WHILE the user is still scrolling when they go beyond a certain point on the page.
I thought the way I was implementing it was pretty and stripped down and basic, but is there a better way to handle this, at least just for IE?
var scrollValue = 0;
var scrollTimer = false;
$(window).bind('scroll', function(){
scrollValue = $(window).scrollTop();
// SET TIMER DELAY FOR SCROLL-STOP
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(scrollStopped, 25);
// STICK/UNSTICK HEADER
if (scrollValue > 320){
if (!$(stickyWrap).hasClass('stuck')){
$(stickyWrap).addClass('stuck')
}
} else {
if ($(stickyWrap).hasClass('stuck')){
$(stickyWrap).removeClass('stuck');
}
}
});
Down with timeout, up with switch
If you made the jQuery a little more simple, and added a switch to only execute anything once before and after the threshold, it should speed things up nicely.
var header = $('.stickyWrap'),
trig = 320,
go = true;
$(window).bind('scroll', function(){
var scrollValue = $(this).scrollTop();
if ((go && scrollValue > trig) || (!go && scrollValue <= trig)) {//before or after
header.toggleClass('stuck');//toggle class
go ? go = false : go = true;//toggle boolean
}
});
Now it will only try to execute anything only once before and once after it crosses the threshold of 320.
Made A Fiddle >