I need help, my navbar is transparent background, so when I do scroll > 540px the navbar turns black, but when the scrolling is > 540px and updated the page the navbar becomes transparent until I make a minimum scroll, how can I fix the problem?
$(window).on('scroll', function() {
if ($(this).scrollTop() > 540) {
$('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
} else {
$('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
}
});
When you navigate the website, say using refresh or history (Back/Forward) buttons, the old scroll state can be remembered by the browser.
To compensate for the page being already scrolled you can:
// 1. Create a function to handle the navbar states/styles
function navbarScrollposStyles() {
if($(window).scrollTop() > 540) {
$('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
} else {
$('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
}
}
$(navbarScrollposStyles); // 2. Do on DOM ready and
$(window).on('load scroll', navbarScrollposStyles); // 3. on window.onload and onscroll
P.S: in your specific code I cannot make sense of the classes navbar-index-scroll animated not being handled properly in the else block, …but that's another pair of shoes.
Additionally it's really expensive to query the document on every scroll "tick" (event) for some .sec elements. You should cache your selectors into a variable like var $sec = $(".sec"); -
also you could prevent such event from being fired too much times and degrade performance - by using some Throttle function.
Related
I need to know if the end of a div element is currently visible in the users' browser.
I tried something I saw on the web, but scrollTop() always gave me zero in my Browser. I read something about an issue in Chrome, but I didn't understand quite well.
jQuery(
function($) {
$('#flux').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
}
);
My idea is the following:
1- User loads page and sees a Bar (sticky div at bottom visible page) with some information.
2- After scrolling a bit, and reaching the end of a div element, this bar will position there, after the div. This is the bar's original position
I wasn't really able to know when I was at the end of the div element. Eventually I found this code:
if ($(window).scrollTop() >= $('#block-homepagegrid').offset().top + $('#block-homepagegrid').outerHeight() - window.innerHeight) {
$('.hero-special-message').removeClass('hero-special-messege-scrolling');
} else {
$('.hero-special-message').addClass('hero-special-messege-scrolling');
}
});
I see that it's working, but I'm having a bit of trouble understanding what it does.
I know the following:
1. $(window).scrollTop();
this gives me the amount of pixels the user has scrolled, pretty self explanatory.
2. $('#block-homepagegrid').offset().top;
I THINK this is the distance between the start of the page and the start of the div. I know it's the current coordinates, but what is top exactly here?
3. $('#block-homepagegrid').outerHeight();
this gives the height of the element, I know there are 3, like
height(), innerHeight() and outerHeight(), if you want to take into
account border, margin, padding, which is the better to use?
4. window.innerHeight;
I understand this is what the user sees, but I'm having troubles understanding why does it matter for my situation.
Thanks!
You may be interested in the native JavaScript IntersectionObserver API. It automatically figures out what percentage of a given element is visible in the window and triggers callbacks based on that. So then you can do this:
function visibleHandler(entries) {
if (entries[0].intersectionRatio >= 1.0) {
// The whole element is visible!
} else {
// Part of it is scrolled offscreen!
}
}
const observer = new IntersectionObserver(visibleHandler, {threshold: 1.0});
observer.observe(document.getElementById('flux'));
Now, whenever the element with ID flux is 100% in view, it will trigger the visibleHandler. It will also trigger again if it's scrolled back out of view; that's why the function checks the ratio of visibility to see if it just hit 100% or just got reduced from 100%. You could be more fancy and use the observer entry's insersectionRect, which gives you the rectangle containing the visible portion of the element, and use that to determine top/bottom visibility.
I have a site where I have each section as 100vh so it fills the height of the screen perfectly. The next step I wanted to implement was disabling the regular scrolling, and on scroll force the screen to jump smoothly to the top of the next 100vh section. Here is the example of this animation / feature:
https://www.quay.com.au/
I was having a hard time finding any answers for this as most things just deal with smooth scrolling when clicking on anchors, not actually forcing div relocation when the user scrolls up / down.
I just wanted to know what code I would need do this...
Thanks, been using stack overflow for a while but first post, let me know if there is anything I can do to make this more clear.
disclaimer: this solution needs some testing and probably a bit of improvements, but works for me
if you don't want to use a plugin and prefer a vanilla JavaScript solution I hacked together a small example how this can be achieved with JS features in the following codepen:
https://codepen.io/lehnerchristian/pen/QYPBbX
but the main part is:
function(e) {
console.log(e);
const delta = e.deltaY;
// check which direction we should scroll
if (delta > 0 && currentlyVisible.nextElementSibling) {
// scroll downwards
currentlyVisible = currentlyVisible.nextElementSibling;
} else if (delta < 0 && currentlyVisible.previousElementSibling) {
// scroll upwards
currentlyVisible = currentlyVisible.previousElementSibling;
} else {
return false;
}
// perform scroll
currentlyVisible.scrollIntoView({ behavior: 'smooth' });
e.preventDefault();
e.stopPropagation();
}
what it does is that it listens for the wheel event and then calls the callback, which intercepts the scroll event. inside the callback the direction is determined and then Element.scrollIntoView() is called to let the browser do the actual scrolling
check https://caniuse.com/#search=scrollintoview for browser support, if you're going for this solution
I am using Jquery to create an effect that will change things as the user scrolls
$(function() {
var headerPosition = $(".home-header");
$(window)
.scroll(function() {
var scroll = $(window)
.scrollTop();
if (scroll >= 200) {
headerPosition.addClass("home-header-color");
} else if (scroll <= 600) {
headerPosition.removeClass("home-header-color");
}
});
});
This is what i'm using a simple add remove class function that gets triggered on a certain scroll amount.
What I want to do is to make it as a user scrolls once no matter how fast.
This is what I came up with but dose not work well scrolling up.
Codepen
I want it to only appear when you reach the top of the screen when scrolling up. Not on just one scroll up.
I tried combining the two but it didn't work out well.
I am trying to do a effect like on the App Builder Website.
When the user is at the header with the background image/video and scrolls down, the site scrolls down to the next div/section/etc. .
If the user scrolls back up and the image/video part is reached, the page scrolls to the top of it. I have tried the following code but there is bug i can't find:
function scrollto(where){
$('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
console.log('Scrolled to ' + where);
closeMenue();
}
var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (scroll == 0){
scrollto('.about');
}
else{
}
} else {
if (scroll == 530){
scrollto('.parallax');
}
else{
}
}
lastScrollTop = st;
});
It is working fine, but only once. Is there a Plugin I can use?
Sorry for my bad english :(
The site you posted is making use of fullPage.js plugin.
It works using CSS3 transitions with a fallback to jQuery when needed.
If you don't want to use jQuery, there's even a pure javascript version for it in development but functional.
dont use jquery for smooth transitions.
is better do that things with css methods.
check this if want use any library
So, here's what I believe I'm seeing on their site if you want to do something similar:
No scroll bar; you'll need to make your top-most container have overflow: hidden. It might be best to capture scroll wheel events. See here for more details: Get mouse wheel events in jQuery?
The active viewport gets a class "active". They're presumably using it to keep track of which viewport to scroll to next and maybe to determine
So, in your scroll wheel event handler, you'll need to:
Determine first if you're going up or down. (Outlined in the SO link above)
You'll need to find the next sibling div/viewport/container/whatever that's not active.
You'll want to move the active class to that appropriate sibling (previous/next depending on up/down) and scroll it into view using scrollTop.
I am trying to recreate the effect seen here: http://jsfiddle.net/surendraVsingh/aATHd/2/
But I am trying to animate the height. For some reason, it works fine when I scroll down, but upon scrolling up, the height doesn't change back to normal. Any ideas?
Here is what I have now: http://justinledelson.com/new/
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#header').animate({"height":"100px"}, 1500);
}
else{
$('#header').animate({"height":"470px"}, 1);
}
});
Thanks!
Although I said that this wasn't a solution for your problem, it seems that it's actually a solution.
Add a class after each action. Something like expanded and collapsed for each situation, and check if that class is present before doing the animation. That way the animations won't trigger until it's necessary.
This avoids triggering the animation multiple times queuing the animation. That's why if you scrolled down a lot of times and scrolled back to top, the "expanding" animation triggered long after you scrolled up (it had to wait that each "collapsing" animation ended)
My test was:
$(window).scroll(function(){
var $header = $('#header');
if ($(this).scrollTop() > 50){ // x should be from where you want this to happen from top//
if (!$header.hasClass('collapsed')) {
$header.animate({"height":"100px"}, 1500, function() {
$header.toggleClass('expanded collapsed');
});
}
}
else{
if (!$header.hasClass('expanded')) {
$header.animate({"height":"470px"}, 1, function() {
$header.toggleClass('expanded collapsed');
});
}
}
});
header should start with expanded class