Develop Reference

Show div between two pixel values when scrolling

I am trying to show 3 divs (sequentially and when scrolling), and only between two pixel values ​​for each div, but there is something about my script that I don't understand:
What I want to show is:
div-1 only visible between 200 and 500 px
div-2 only visible between 900 and 1200 px
div-3 only visible between 1600 and 1900 px
What am I doing wrong here?
DEMO (JSFiddle)
And on the other hand, is there any simpler and more elegant way to do this?
Thanks in advance!
SCRIP:
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
//if (document.body.scrollTop > 200 || document.documentElement.scrollTop < 500) {
$('#div-1').fadeIn();
}
else {
$('#div-1').fadeOut();
};
if ($(this).scrollTop() > 900) {
//if (document.body.scrollTop > 900 || document.documentElement.scrollTop < 1200) {
$('#div-2').fadeIn();
}
else {
$('#div-2').fadeOut();
};
if ($(this).scrollTop() > 1600) {
//if (document.body.scrollTop > 1600 || document.documentElement.scrollTop < 1900) {
$('#div-3').fadeIn();
}
else {
$('#div-3').fadeOut();
};
});
HTML:
<div id="div-1">Radio</div>
<div id="div-2">Blog</div>
<div id="div-3">Store</div>
<div id="content"></div>
CSS:
#div-1,#div-2,#div-3 {
display:none;
position:fixed;
width:200px;
height:60px;
margin:0 auto;
text-align:center;
font-size:20px;
line-height:60px
}
#div-1{background:#ff0;color:#000}
#div-2{background:#000;color:#fff}
#div-3{background:green;color:#fff}
#content{text-align:center;height:2500px}

You were just missing &&.
if ($(this).scrollTop() > 200 && $(this).scrollTop() < 500) {
// ...
}
if ($(this).scrollTop() > 900 && $(this).scrollTop() < 1200) {
// ...
}
if ($(this).scrollTop() > 1600 && $(this).scrollTop() < 1900) {
// ...
}
"If scrolling is greater than 200 AND at the same time the scrolling is less than 500, then show div-1"...
Here is a working example: JSFiddle

You are missing a couple things:
All of your logic should use && instead of ||
You should check the visibility of items before showing or hiding them.
You should always store references to commonly accessed DOM elements, especially if you are accessing them inside a scroll event handler (which fires A BUNCH).
OK, that last point is just a performance thing... but you should know it!. Here is an updated fiddle:
http://jsfiddle.net/xebgpduv/
Here's what a block of logic looks like:
if (scrollTop > 200 && scrollTop < 500) {
if(!$div1.is(':visible')) {
$div1.fadeIn();
}
} else if($div1.is(':visible')) {
$div1.fadeOut();
};

jQuery: Why can't my script remove the class?

jQuery won't remove the class after scrolling
This is my script:
$(window).scroll(function(){
if($(window).scrollTop() >= $("#white").offset().top -70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#color-main").offset().top -70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#yellow").offset().top -70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
This is my HTML:
<section class="home-page" id="white">Blablabla</section>
<section class="wrap" id="color-main">Blablabla</section>
<section class="wrap" id="yellow">Blablabla</section>
but my <div>
<div class="burger-menu white color-main yellow">
still has the classes "white" and "color-main", which should be removed. :(
I made a codepen for you to see it.

There are 2 fixes I would recommed you try:
Don't do multiple .scroll(function(){...}) calls, they overwrite each other.
Use $("body").scroll(function(){...}), because that's the element you (usally) scroll in

The below example uses only the IF statement and deletes the other classes. Try this and see if you get the result you desire. Instead of relying on an ELSE that could be broken by another scroll function else statement we simply remove all classes and only add the class you want.
Example:
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("yellow").addClass('white');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').removeClass("white").removeClass("yellow").addClass('color-main');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("white").addClass('yellow');
}
});

I agree with those who suggest putting them all in a single .scroll() function. This worked for me:
(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
})(jQuery);

To have only one class active at a time, use removeClass to remove the others. You can use a single scroll event handler, and rearrange the code to look for the last section first, that makes the code simpler:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
if (top >= $("#yellow").offset().top) {
$('.burger-menu').removeClass('white color-main').addClass('yellow');
} else if(top >= $("#color-main").offset().top) {
$('.burger-menu').removeClass('white yellow').addClass('color-main');
} else if (top >= $("#white").offset().top) {
$('.burger-menu').removeClass('color-main yellow').addClass('white');
} else {
$('.burger-menu').removeClass('white color-main yellow');
}
});
Demo: https://jsfiddle.net/Guffa/yka8nzt4/1/
Another way would be to determine the status for each class:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
var white = top >= $("#white").offset().top;
var main = top >= $("#color-main").offset().top;
var yellow = top >= $("#yellow").offset().top;
$('.burger-menu')
.toggleClass('white', white && !main)
.toggleClass('color-main', main && !yellow)
.toggleClass('yellow', yellow);
});

How to use scroll instead of mousewheel Js

I need to convert the fallowing working script as so it works on scroll regardless of how the site is being scrolled.
// // HEADER
$(window).bind('mousewheel', function(event) {
if ($(document).scrollTop() <= 20 || event.originalEvent.wheelDelta > 0 && $(document).scrollTop() <= 105) {
//console.log('large');
headerLarge();
}
else if (event.originalEvent.wheelDelta > 0 && $(document).scrollTop() <= 120) {
//console.log('medium');
headerMed();
}
else if (event.originalEvent.wheelDelta < 0 && $(document).scrollTop() >= 100) {
//console.log('small');
headerSm();
}
});
I tried using the following without success:
$(document).on('scroll', function(event) { ...

This should work
$(window).scroll(function(){
});

You can do it using $(window).scroll() like this:
$(window).scroll(function() {
alert("scrolling!");
});
Taken From Infinite Scroll Paging

Sticky scroll menu hiding when offset().bottom - 500

I have a sticky menu that appears when a user scrolls down 500px from the top of the view. I'd like to have it also hide when the user scrolls down to 500px from the bottom.
Thanks in advance.
var stickTop = $('.sidebar-stick').offset().top + 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop ) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});

One solution would be to calculate both limits from top and bottom (not only top), and then add the bottom limit to the condition:
var stickTop = $('.sidebar-stick').offset().top + 500;
var stickBottom = $(document).height() - 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop && $(window).scrollTop() < stickBottom) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});
Depending on the effect that you want to create, you may want to take into account the window height too.

run javascript on div click?

i wonder if someone can help, basically i have this javascript which fades in a div when the user scrolls down a page, however, i want to put a condition on the javascript to say only fade after the user has clicked another div element.
for instance i need the user to read a piece of text before they scroll down the page and this div fades in, on this piece of text is a div called
so once the user has read the text they will click 'exit_profile_intro4' which will close the text box,
only then do i want the javascript for the scroll and fade in div to work. can someone please show me how i can do this: i've tried
<script>
$('div.exit_intro4').click(function(){
$(window).scroll(function(){
var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
var distanceFromTop = $(window).scrollTop();
if( distanceFromTop > 300 && !$("profile_intro_case5").is(":visible")
&& leftToBottom > 1000 && !$(".profile_intro_case5").is(":animated")) {
$(".profile_intro_case5").fadeIn(1000);
}else if($(".profile_intro_case5").is(":visible") && (distanceFromTop < 300 || leftToBottom < 1000) && !$(".profile_intro_case5").is(":animated")){
$(".profile_intro_case5").fadeOut();
}
});
});
</script>
original:
<script>
$(window).scroll(function(){
var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
var distanceFromTop = $(window).scrollTop();
if( distanceFromTop > 300 && !$("profile_intro_case5").is(":visible")
&& leftToBottom > 1000 && !$(".profile_intro_case5").is(":animated")) {
$(".profile_intro_case5").fadeIn(1000);
}else if($(".profile_intro_case5").is(":visible") && (distanceFromTop < 300 || leftToBottom < 1000) && !$(".profile_intro_case5").is(":animated")){
$(".profile_intro_case5").fadeOut();
}
});
</script>

Add a state to the scroll event.
(function() {
var user_can_scroll = false;
$("div.exit_intro4").click(function(e) {
/* do your thing */
user_can_scroll = true;
});
$(window).scroll(function(e) {
if (user_can_scroll) {
/* do your scroll thing */
}
});
})();

I see no reason why your code would be incorrect (without actually running it), however you assign a click like this
$('div.exit_intro4').click( // Function
Yet, you say you want to trigger it when "exit_profile_intro4" is clicked. Perhaps it should be this.
$('div.exit_profile_intro4').click( // Function