We Keep Coding

Smooth mouse scroll upward using Jquery and CSS

I am try to make a smooth scroll upward and downward but having issue with the follow up image. t
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 400) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 400 && scroll < 900) {
$('#two').css('position', 'absolute');
$('#three').css('position', 'fixed');
}
});
https://jsfiddle.net/KingJef/6q47vmhn/32/

I have found a question with a similar dynamics, following the proposal of the author of the question it is possible to do the same in your question:
$(document).ready(function() {
$(window).scrollTop(1);
var img1 = $('#one');
var posimg1 = img1.position().top;
var img2 = $('#two');
var posimg2 = img2.position().top;
var img3 = $('#three');
var posimg3 = img3.position().top;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll <= posimg1) {
img1.addClass('latched');
} else {
img1.removeClass('latched');
}
if (scroll <= posimg2) {
img2.addClass('latched');
} else {
img2.removeClass('latched');
}
if (scroll <= posimg3) {
img3.addClass('latched');
}
});
});
Demo: https://jsfiddle.net/pr0mming/ybar8onj/14/
Apparently the error is to preserve the absolute images with css, instead of this they are left in fixed and the property would be eliminated once the scroll is exceeded (visibility level) but otherwise the images should be kept in fixed.
But there is a shorter solution with the same algorithm, of course, it is simply to add this magic css and remove it as the case may be:
$(document).ready(function() {
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 500) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 500 && scroll < 1600) {
$('#two').removeAttr( 'style' );
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
else {
$('#two').css({ position: 'fixed', top: 0, width: 'auto' });
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
});
});

Jquery add CSS class after 'X' amount of viewport height scrolled

So I have this jQuery function that adds / removes a CSS class to an element after 600px of the viewport height has been scrolled.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 600) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
I'd like to tweak it so instead of working based off a pixel value, it works off of the view height css measurement "VH", but the equivalent results are what matter in this case.

It can be done by getting the window height using $(window).height().
For instance suppose you have to scroll half the screen more (height is 150vh) and you have to detect when 40% has been scrolled:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 0.4 * $(window).height()) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
body{
margin: 0;
height: 150vh;
}
.cta_box {
height: 100%;
background: green;
}
.cta_box.fadeout {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta_box"></div>

Use a percentage of the window height to compare
$(window).scroll(function() {
var height = $(window).height(),
scroll = $(window).scrollTop()
limit = 0.6; //implies 60 vh or 60% of viewport height
if (scroll >= height*limit) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
and even better would be to update some variable only when the window is resized to avoid computations all the time
var limit = 0.6, //implies 60 vh or 60% of viewport height
scrollLimit = 0;
$(window).resize(function(){
scrollLimit = $(window).height() * limit;
}).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= scrollLimit ) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
}).trigger('resize').trigger('scroll'); // trigger both events on start to force initial setup

Try something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});

For retrieveing the viewport Height, you could use $(window).innerHeight():
$(window).scroll(function() {
var scroll = $(window).innerHeight();
if (scroll >= 600) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
Hope this helps.
Leo.

Header hiding on scroll positioning

I have included a snippet to show the general idea of what I have right now. The snippet will show a header and if you scroll the header stays the same size until the full height of the header has been scrolled down and then it will go away. Then when you scroll up (when the header gone) the header will show.
The issue I cannot seem to figure out is how to remove the position: fixed from my css and still get the javascript to work. I want the header to scroll down normally (just like Stack overflow's header), however with the ability to still re-appear when scrolling up.
I tried taking out position: fixed and the script broke. I also tried adding position: fixed to the nav-up class...neither change worked.
Does anyone know what I could do to make this work?
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
html, body {
padding:0;
margin:0;
}
header {
/*background: #2F4F4F;*/
/*background: #53868B;*/
/*background: #35586C;*/
background: #F2F2F2;
height: 120px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
z-index: 100;
}
.nav-up {
top: -120px;
}
#logo {
padding: 5px 20%;
display: inline-block;
}
#logo img {
height: 110px;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
<div id="logo">
<img src="images/eslich.png" alt="">
</div>
</header>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>

Update
This is the new jsfiddle using her code https://jsfiddle.net/jz8aa5yz/2/
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
if (st < navbarHeight) {
if (st === 0 || st < 50) {
$('header').css('position', 'static');
}
} else {
$('header').css('position', 'fixed');
}
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
`
Old
I'm still testing some javascript, but I wonder if the effect you wanted is something like this? I did a few things different, but the main things were using hide(), css(), slideUp(), slideDown(), and if / else statements. Here's a jsfiddle of the example
<script>
$(document).ready(function () {
var header = $("header");
var lastScrollTop = 0;
$(window).on("scroll", function () {
currentScrollTop = $(this).scrollTop();
if ($("body").scrollTop() > header.outerHeight()) {
if (currentScrollTop > lastScrollTop) {
if (header.css("position") == "fixed") {
header.slideUp();
} else {
header.css({
display: "none",
position: "fixed"
});
}
} else {
header.slideDown();
}
} else {
if (currentScrollTop === 0) {
header.css({
display: "block",
position: "static"
});
}
}
lastScrollTop = currentScrollTop;
});
});
</script>

Hide menu on scroll down and show on scroll up

I made this snippet code to hide menu on scroll down and show on scroll up but I have some issues, when I scroll to top the menu still have fixed position, how I can resolve this problem, Thanks!
JAVSCRIPT :
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 500) {
$('.mainmenu').addClass('nav-down');
}
});
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.mainmenu').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 500);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('.mainmenu').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('.mainmenu').removeClass('nav-up');
}
}
lastScrollTop = st;
}
CSS :
.mainmenu {
background: #222;
height: 50px;
padding: 0 15px;
width: 80%;
margin: 0 auto;
}
.nav-down{
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -50px;
}
Demo : jsfiddle

To you first listener, just add an else statement as follows:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 150)
$('.mainmenu').addClass('nav-down');
else
$('.mainmenu').removeClass('nav-down');
});
Also note that you don't need a setInterval() for the second listener, see jsfiddle

I tested it and it works fine!!
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 500) {
$('.mainmenu').addClass('nav-down');
}
else
{
$('.mainmenu').removeClass('nav-down');
}
});

Add an else to your scrollTop with a removeClass and you should be fine, I tested it and it works. Here
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 500) {
$('.mainmenu').addClass('nav-down');
}
else
{
$('.mainmenu').removeClass('nav-down');
}
});

Detect nav direction with a variable
var lastscrolltop=0;
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > lastscrolltop)
jQuery('.mainmenu').addClass('nav-up');
else
jQuery('.mainmenu').removeClass('nav-up');
lastscrolltop=jQuery(window).scrollTop();
});
and use css transition for a smooth show/hide
.mainmenu {
transition:all 0.5s ;
}

Your way is too much complicated.
You can hide the menu on scroll with a simple transition using jQuery .fadeIn() and fadeOut(), without the need for css.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('.mainmenu').fadeOut('fast');
} else {
$('.mainmenu').fadeIn('fast');
}
lastScrollTop = st;
});

Auto scroll to top element, when scrolling

I have three sections home_bg,barman,galeria. I want, that after scroll to section who feel $(window).scrollTop() add class. When this scroll <= 0.5 * height feeling section, auto scroll to top feeling section.
Example: http://www.dishoom.com/
<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
/* scrollAnch = $("section.nomargin");*/
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>