Changing element styles following scrolling from the top - javascript

I'm trying to apply a different style to the header whenever you scroll down from the top. Basically I want it so that if you are scrolled at the top then apply style 1, but if you are not scrolled at the top then apply style 2.
I have tried using a while and for loop to achieve this but both failed. The jQuery example below did work but for some reason not on this example. However I would rather use JavaScript than jQuery since I am learning JavaScript.
Can someone advise me what should I use for this: a while or if statement? And can someone tell me what I have done wrong with my attempts?
Thanks for any help.
// ATTEMPT 1
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
while (h > 0) {
headerWrap.addClass('scroll-opacity-change');
}
headerWrap.removeClass('scroll-opacity-change');
}
// ATTEMPT 2
/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
*/
/*
// ATTEMPT 3
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
if (h > 0) {
headerWrap.addClass('scroll-opacity-change');
} else {
headerWrap.removeClass('scroll-opacity-change');
}
}
*/
body{
height:1000px;
}
#header-wrap{
height:100px;
width:100%;
background:#0f0;
}
.scroll-opacity-change{
background:#f00;
}
<div id="header-wrap">
</div>

Well first of all, you need to add listener to detect window scroll.
$(document).ready(function() {
$(window).scroll(function() {
//do the header styling using .style
});
});
Now you need to store the scroll log in few variables to figure out you are scrolling down or not, you can the following using this:
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// You are down scrolling
} else {
// You are up scrolling
}
previousScroll = currentScroll;
Final code:
$(document).ready(function() {
previousScroll=0 //this means we are starting from top
$(window).scroll(function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > previousScroll){
// Change header style cause you are down scrolling
} else {
// Do something else? You are up scrolling anyway...
}
previousScroll = currentScroll;
);
});
I hope this helps, your comments are welcomed.

Use class instead of id;
<div class="header-wrap">
</div>
and
$(window).scroll(function() {
$('.header-wrap').addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
$('.header-wrap').removeClass('scroll-opacity-change');
}
});

Related

show div after scrolling in mobile devices

i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you
You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>
Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});
you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

If/Else Jquery Header animations

I am having some trouble with this one. I have the following javascript...
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130) {
header.animate({height: '51px'}, 500);
mainNav.css("display", "none");
logo.fadeOut("fast");
scrollLogo.delay(300).slideDown("fast");
$(this).off('scroll');
}
else {
header.animate({height: '130px'}, 500);
}
});
I am trying to do a series of changes to my header when scrolled past 130 px and then return it to its original state if scrolled back up. Everything works fine if I comment out the else statement, but as soon as I start to add to it, everything breaks. I cannot figure out why. Any help is much appreciated.
My guess would be that you're repeatedly calling either the if or the else condition, whereas you just want to call them just once.
Try something like this:
var compactHeader = false;
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130 && !compactHeader) {
compactHeader = true;
// Code to collapse header...
} else if (scrollPosition < 130 && compactHeader) {
compactHeader = false;
// Code to expand header...
}
});
As well as checking the scroll position we check whether the header is collapsed or expanded, to ensure the animation is only performed once.

Trying to trigger scroll event by using jquery.mousewheel

I'm having some trouble with triggering a scroll event by using jquery.mousewheel. I want to "expand" the scroll event for #bio-content-container to trigger when scrolling over #bio-slider-container.
I'm using following code:
var lastScrollTop = 0;
$("#bio-content-container").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop){
scroll('Down');
} else {
scroll('Up');
}
lastScrollTop = st;
});
jQuery(function($) {
$('#bio-slider-container')
.bind('mousewheel', function(event, delta) {
$("#bio-content-container").trigger('scroll');
return false;
});
});
I don't want to trigger scroll on #bio-slider-container, so that's why I'm using mousewheel. Any help would be much appreciated :)
If I understand correctly, you want to scroll the contents of #bio-content-container when you use the mousewheel over #bio-slider-container. You might want to check out the jquery.scrollTo plugin. This code works for me (without seeing your HTML):
$(document).ready(function () {
$('#bio-slider-container').bind('mousewheel', function (event, delta) {
var content = $("#bio-content-container");
if (delta < 0) {
content.scrollTo("+=10");
} else {
content.scrollTo("-=10");
}
});
});

Scrolling to show div elements

I'm wanting to show two divs when the page has been scrolled, but once they've appeared not be hidden anymore. The following code works for showing the divs but once I scroll back to the top they hide.
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$("#tip-2").show();
$("#now-available").show();
} else {
$("#tip-2").hide();
$("#now-available").hide();
}
});
How about...
var madeVis = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$("#tip-2").show();
$("#now-available").show();
madeVis = true;
} else if (!madeVis) {
$("#tip-2").hide();
$("#now-available").hide();
}
});

Categories

Resources