Im creating a navbar that will fade in when I scroll a little bit down the page.
My code works fine on desktop, but it does not work when I switch to mobile.
Here is the javascript:
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 100;
if ($(window).scrollTop() > 50) {
$('nav').css("background-color","rgba(6, 14, 49, 0.94)");
}
else {
$('nav').css("background-color","rgba(6, 14, 49, 0.50)");
}
});
});
Thanks for any and all suggestions. I already tried switching $(window) to $('body') or $('html') and they didnt work
You can use $().scroll method to implement the desired result.
$(window).scroll(function() {
var distance = 50;
if ($(window).scrollTop() > 50) {
$('nav').css("background-color","rgba(6, 14, 49, 0.94)");
}
else {
$('nav').css("background-color","rgba(6, 14, 49, 0.50)");
}
});
});
On mobile, the "scroll" event will be fired only when the scroll stops. for example, if you have a big slide on your mobile phone, and the window keep scrolling for 5 seconds, then the scroll event will be fired after 5 seconds.
Therefore, unfortunately, you cannot monitor the offset while the window is scrolling.
as an alternative, try to check some plugin that fake the scrolling which allow you to "monitor" the offset while "scrolling" . eg :https://github.com/cubiq/iscroll
Related
I have a part of code that looks if a user is scrolling up or down, and inside that check if the user is at the top of the page.
To see my position I log that position in my console but for some reason when I scroll up using my scroll wheel fast, it shows a number like 75, 98, 66 etc. Only when I scroll again (while it's already at the top) it goes to 0. Why?
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
var height = $(window).scrollTop();
console.log(height);
if(height > 20) {
$('.nav-link').css('color', '#2f323a');
}else{
$('.nav-link').css('color', '#ffffff');
}
}
});
I want to change the text color of my menu to white when a user is at the top but now if I scroll up fast using my mouse scroll it does not work right away.
Wouldn't you want to detect any kind of scroll? Not just mouse wheel.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() >= 20) {
$('.nav-link').css('color', '#2f323a');
} else {
$('.nav-link').css('color', '#ffffff');
}
});
});
I had seen that there is similar questions, but couldn't find proper answer for my problem.
Code:
function test() {
var scroll = parseInt($('.sidebar').css('height'));
if (window.matchMedia('(min-width: 769px)').matches) {
$(window).scroll(function() {
if ( $(window).scrollTop() > scroll ) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
} }
window.onload = function() { test(); }
As you can see this code (adding and removing simple class when scrolling) should work for resolutions bigger than 769px (width) and it works - when test this on mobile device with resolution 1024x768 at 1024px width - works fine, BUT the problem is when you rotate the device - now the width is 768px, but "fixed" class is again added and breaks layout. You have to refresh the whole page so the code to work properly.
I can make the whole page to reload on resize but this is slow and irritating for users.
Tried to set function and on resize but it doesn't work.
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
test();
}, 10);
});
Tried to add "else" for the if (window.matchMedia('(min-width: 769px)').matches) but it doesn't work too.
Is there a way to fix this?
The scroll-event is added onload, and not removed on the resize-event. So the event-function is still being triggered. How about:
$(window).on('scroll resize', function() { // On both scroll and resize, call
if (
window.matchMedia('(min-width: 769px)').matches
&& $(window).scrollTop() > scroll
) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
I made this website: bosd.eu.
It has a piece of javascript/jQuery that focusses on the proper area of the page when clicked.
However, when I use Firefox, either mobile or desktop nothing works.
So It has to be the javascript right?
var initSmoothScroll = function(){
$('.scroll').click(function () {
doScroll($(this))
});
};
var doScroll = function($element){
$('body').animate({
scrollTop: $('#' + $element.attr('target')).offset().top - 10
}, 300);
};
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#topbutton').fadeIn('slow');
}
else {
$('#topbutton').fadeOut('fast');
}
});
This is how it is processed in HTML:
<a class="scroll" target="story" id="storybutton"><h1>ABOUT</h1></a>
I found this when searching, but it did not provide me with an answer:
Jquery Auto scroll not working in firefox
smooth scroll not working in firefox, works fine in IE
Animate scroll not working in firefox?
Apparently i needed to add HTML to the body.animate:
var doScroll = function($element){
$('body, html').animate({
It works flawlessly now.
I am building a full page slider that keeps the native scrollbar and allows the user to either free scroll, use the mouse wheel or navigation dots (on the left) to switch to a slide.
Once the user is on the last slide and tries to scroll down further, the whole slider moves up to reveal a simple scrollable section. If the user scrolls down and then tries to go back up, then this new section moves out of the way again and returns the slider back into view.
Fiddle: http://jsfiddle.net/3odc8zmx/
The parts I'm struggling with:
Only the first two navigation dots work. The third one DOES WORK if you area looking at the first slide. But doesn't do anything, if you are on slide 2. Note: the purple one is a short-cut to the second section of the page and not related to the slider.
When moving to the last slide (via the dots, if you're on the first slide) it causes the code to make the whole slider move upwards as it sees this as the user has slid past the last slide as per the description above. I have tried to combat this using a variable called listen to stop the scroll event listening when using the showSlide method... but it seems to be true even though I set it to false, and only reset it to true again after the animation...
When scrolling down using the mouse wheel, I can get to the second section and back up, but not to the first third section. I'm wondering if I could use the showSlide method to better handle this instead of the current dirty next and prev functions I have implemented.
Note: If the user has free-scrolled, when they use the mouse-wheel, I want the slider to snap to the nearest slide to correct itself... Any suggestions for how I could do this?
Can anyone offer some help?
Here's the JS:
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
And for those wondering why I'm not using something like fullPage.js, it's because it can't handle the way I want to transition between the two areas and have two scrollbars (one for each area).
You can use:
e.originalEvent.wheelDelta
instead of:
st > lastScrollTop1
in the mousewheel event for your third problem to check if the user has scrolled up or down. And also change the +/- in prevSlide. I used dm4web's fiddle for your first problem. And I used:
scrollTop: offset - 1
instead of:
scrollTop: offset
for your second problem, because when the scroll reaches to the last pixel of the third element, it automatically goes to the next section, so 1 pixel is enough for it not to.
Here's the fiddle: http://jsfiddle.net/3odc8zmx/3/
As suggested by #chdltest, you could do it by using fullPage.js.
Here's an example. Go to the last section.
Code used for the example:
Javascript
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow: true,
scrollBar: true,
afterLoad: function (anchor, index) {
//hiding the main scroll bar
if (index == 4) {
$('body, html').css('overflow', 'hidden');
}
//showing the main scroll bar
if (index == 3) {
$('body, html').css('overflow', 'visible');
}
}
});
CSS (in case you prefer to use the normal style for it)
/* Normal style scroll bar
* --------------------------------------- */
.slimScrollBar {
display: none !important;
}
.fp-scrollable {
overflow: auto !important;
}
Advantages of using fullPage.js instead to your own code:
Strongly tested in different devices and browsers. (IE, Opera, Safari, Chrome, Firefox..)
Prevent problems with trackpads, Apple laptops trackpads or Apple Magic Mouse.
Old browser's compatibility, such as IE 8, Opera 12...
Touch devices compatibility (IE Windows Phone, Android, Apple iOS, touch desktops...)
It provides many other useful options and callbacks.
I've been trying to fade out a splash when scrolling down, and fading it in when scrolling back to the top of the page. It seems to work ok when scrolling down, but when I go back, it doesn't fades in. I tryed using fadeIn and FadeOut instead of fadeTo but didn't get a proper behavior
The code is actually pretty simple:
var splashTop = $('.splash-container').offset().top;
$(window).scroll(function () {
if ((splashTop - $(window).scrollTop()) < 50) {
$('.splash-container').stop().fadeTo("slow", 0);
} else {
$('.splash-container').stop().fadeTo("fast", 1);
}
});
And here is the jsFiddle example:
jsFiddle
If you just need to check if the scroll is at the top or not then you don't need to check the position of the Splash, Try:
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$('.splash-container').stop().fadeTo("slow", 0);
console.log('p')
} else {
$('.splash-container').stop().fadeTo("fast", 1);
console.log(box1Top)
}
});
Check the Demo Fiddle
Edit
Now why your code doesn't work? ... Because you are always getting a value less than 50:
splashTop = 8 always
-
$(window).scrollTop() = more than 0
Then the result is always negative or 8 as max, you can never have a number more than 8 and your else condition is useless.