I have this code that makes my navbar hide when scrolling down and appear when scrolling up. Currently it hides instantly when scrolling down. I would like to change this behavior to hide after scrolling 200px.
Thank you for your help!
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("custom-navbar").style.top = "0";
} else {
document.getElementById("custom-navbar").style.top = "-73px";
}
prevScrollpos = currentScrollPos;
}
Currently every time you scroll the variable prevScrollpos is updated. If you change that behavior to only update when scrolling up you'll be able to use that variable to measure the 200px scroll you want.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("custom-navbar").style.top = "0";
prevScrollpos = currentScrollPos;
} else if (currentScrollPos > prevScrollpos + 200){
document.getElementById("custom-navbar").style.top = "-73px";
prevScrollpos = currentScrollPos;
}
}
You really want to clean up this code though. For example prevScrollpos has a lower case p while currentScrollPos has upper case P which is inconsistent and will lead to errors when you mistype later. Also the way this is structured you'll constantly make style changes to your navbar while scrolling. Every time you scroll up you overwrite "0" with "0", and the same is true for every time you scroll 200px down.
A better way to structure this would be to introduce a new Boolean variable that keeps track if the navbar is hidden or not. This way you can make sure you only change style when you actually want a change.
Related
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
I'm trying to make a fullpage component in Angular :
I want each sections take a 100% height of my screen, and when I scroll in a section (up or down) it goes to the next / previous section. I declared this function to do that, and it works :
#HostListener('wheel', ['$event'])
onScroll(event: WheelEvent) {
if (event.deltaY < 0) {
this.slidePrev();
} else {
this.slideNext();
}
}
Now, I want to update a little to slide to the previous slide only if the scrollbar is on the top, or slide to the next only if the scrollbar is to the bottom. I Used JQuery to do that, this way :
#HostListener('mousewheel', ['$event'])
onScroll(event: WheelEvent) {
if (this.isSliding) {
event.preventDefault();
return;
}
let $section = $(event.target).closest(".section");
//$section.css("opacity", "0.99");
//setTimeout(() => {
// $section.css("opacity", "1");
//}, 100);
if (event.deltaY < 0) {
if ($section.scrollTop() == 0) this.slidePrev();
} else {
if ($section.scrollTop() == $section.prop("scrollHeight") - $section.height()) this.slideNext();
}
}
It works the first time, but if I slide down to the next slide, when I want to sroll to move my scrollbar, it doesn't move.
I noticed that after the website trigger an update (example : css :hover event that update style) the scrollbar move again. So, if I uncomment my 4 commented lines, it works again because the style is updated.
Can someone tell me why ? And is there a better way to fix that issue ?
EDIT :
in slideNext() and slidePrev() I'm using $().animate("scrollTop", ...) function, and it's the function that breaks my scroll
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don't scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?
Short question: How can I make the scroll "focus" on the contents height in the welcome DIV?
I've made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean :)
Thanks in advance.
You can add overflow: hidden to the body.
http://jsfiddle.net/y3qV5/520/
body.freeze { overflow: hidden; }
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});
Old answer:
http://jsfiddle.net/y3qV5/519/
//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
console.log('scroll');
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
console.log('prevent');
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');
Fullscreen mode and I have been battling for a while in this Flex application, and I'm coming up short on Google results to end my woes. I have no problem going into fullscreen mode by doing a Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;, but the rest of the content just sits there in the top, left corner at it's original size.
All right, says I, I'll just do a stage.scaleMode = StageScaleMode.SHOW_ALL and make it figure out how to pull this off. And it looks like it does. Except that when you mouse over the individual checkboxes and buttons and various components, they all fidget slightly. Just a slight jump up or down as they resize...on mouse over. Well, this is frustrating, but bearable. I can always just invoke invalidateSize() explicitly for all of them.
But for the comboboxes. The ones at the bottom have their menus go off the bottom of the screen, and when I pop out of fullscreen mode, their drop downs cut off half way. I have no idea how to fix that. Can someone step in here, and put me out of my misery?
What is the right way to scale a Flex application up to fullscreen?
var button:Button = button_fullscreen;
try {
if(stage.displayState == StageDisplayState.FULL_SCREEN) {
Application.application.stage.displayState = StageDisplayState.NORMAL;
button.label = "View Fullscreen Mode";
stage.scaleMode = StageScaleMode.NO_SCALE;
} else {
Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
button.label = "Exit Fullscreen Mode";
stage.scaleMode = StageScaleMode.SHOW_ALL;
}
invalidateSizes(); // Calls invalidateSize() explicitly on several components.
} catch(error:SecurityError) {
Alert.show("The security settings of your computer prevent this from being displayed in fullscreen.","Error: "+error.name+" #"+error.errorID);
} catch(error:Error) {
Alert.show(error.message,error.name+" #"+error.errorID);
}
Sometimes things go wrong with flex :)
try the following approach
stage.align = StageAlign.TOP_LEFT;
then on resize or added to stage set the scaling manually
private function updateScaling():void
{
if(stage.stageWidth != width || stage.stageHeight != height)
{
var scaling:Number = 1;
if(width>height)
{
scaling = stage.stageWidth / width;
}
else
{
scaling = stage.stageHeight / height;
}
scaleX = scaleY = scaling;
}
}