Develop Reference

Fixed sidebar on scroll then back to normal when scrolled up

I want to mimic this effect for sidebar:
https://www.matchesfashion.com/us/womens/just-in/just-in-this-month
I think I have everything working expect the scroll up functionality. Here is my codepen: https://codepen.io/anon/pen/vVByvR?editors=0010
var $sideBar = $('.sidebar');
var sideBarOriginalST = $sideBar.position().top;
var placedAchieved = false;
var sideBarPostion = -570;
var lastScrollTop = 0;
var stopPos = ($sideBar.position().top + $sideBar.outerHeight()) - 291;
$(window).on('scroll', function() {
var sT = $(this).scrollTop();
$sideBar = $('.sidebar');
if(sideBarOriginalST <= sT && !placedAchieved) {
$sideBar.css({
position: 'fixed',
top: (sT-sideBarOriginalST) * -1
});
placedAchieved = false;
}
if(stopPos <= sT) {
placedAchieved = true;
$sideBar.css({
position: 'fixed',
top: sideBarPostion
})
}
// having trouble on scroll up event
if (sT < lastScrollTop) {
console.log(sT, sideBarPostion);
placedAchieved = false;
// $sideBar.css({
// position: 'fixed',
// top: sideBarPostion+=1
// });
}
if(sideBarOriginalST >= sT) {
$sideBar.css({
position: 'static',
top: 0
});
placedAchieved = false;
}
lastScrollTop = sT;
})

No need for javascript! Use position: sticky.
More info: https://css-tricks.com/position-sticky-2/

Is that what you are looking for ?
var $sidebar = $('.sidebar');
var sidebar_height = $sidebar.height();
var $last_item = $('.sidebar .row:last-child');
var last_item_offset = $last_item.offset().top;
var last_item_height = $last_item.height();
$(window).on('scroll', function() {
var scroll_top = $(this).scrollTop();
if(scroll_top >= last_item_offset)
{
$sidebar.css({
position: 'fixed',
top: '-' + (sidebar_height - last_item_height) + 'px'
});
}
else
{
$sidebar.css({
position: 'static',
top: 'auto'
});
}
});
https://codepen.io/anon/pen/oavZyg?editors=0010

Code not working correctly in Safari and responsive browsers

I have the following code which 'shows/hides' my navigation up off the top of the screen, and brings it down again.
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight(true);
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 0);
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop) {
// Scroll Down
$('#screen-nav').removeClass('nav-down').addClass('nav-up');
} else {
$('#screen-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
});
css
#screen-nav {
position: fixed;
top: 0; left: 0; right: 0;
}
#screen-nav.nav-up { top: -100px; }
#screen-nav.nav-down { top: 0; }
The problem is that on the safari browser and when the screen changes from mobile size (<768px on all browsers) to screen size sometimes the .nav-up class gets added and the navigation doesn't show. But only when the user scrolls to the top of the page.
Not sure if there is a better way to write the code to ensure proper functionality.

I see you are using this example. He has the fiddle working well too. the only thing is that on browser resize nothing regarding show the nav is in place. You should be able to just add that separately.
$(window).resize(function(){
$('#screen-nav').removeClass('nav-up').addClass('nav-down')
});
I updated his original fiddle to reflect the addition of window resize handling.

Javascript: scroll from one div to the other when scrolling?

I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div.
Here are my files with an example with two divs:
$(document).ready(function() {
var lastScrollTop = 0;
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('html, body').animate({
scrollTop: $("#space_od").offset().top
}, 500);
} else {
$('html, body').animate({
scrollTop: $("#black_hole").offset().top
}, 500);
}
lastScrollTop = st;
});
});
body {
padding: 0;
margin: 0;
}
#black_hole {
background-image: url("black_hole.jpg");
background-position: center;
display: block;
height: 100vh;
width: 100%;
}
#space_od {
background-image: url("2001.png");
background-position: center;
display: block;
height: 100vh;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black_hole">
</div>
<div id="space_od">
</div>
It seems to work fine when scrolling down the first time, but not when scrolling up, it seems to move a few pixels and then stop. Any ideas?

scrollTo is a class to add to the divs you need to scroll to:
<div id="black_hole" class="scrollTo">
</div>
<div id="space_od" class="scrollTo">
</div>
Js
var scrolling = false;
var currentPos = 0;
function scrollUp(){
if(!scrolling && currentPos > 0 ){
scrolling=true;
currentPos --;
var scrollToElement = $('.scrollTo')[currentPos];
$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500, function(){
scrolling = false;
});
}
}
function scrollDown(){
if(!scrolling && currentPos < $('.scrollTo').length-1 ){
scrolling=true;
currentPos ++;
var scrollToElement = $('.scrollTo')[currentPos];
$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500,function(){
scrolling = false;
});
}
}
$(document).ready(function() {
// Get the current position on load
for( var i = 0; i < $('.scrollTo').length; i++){
var elm = $('.scrollTo')[i];
if( $(document).scrollTop() >= $(elm).offset().top ){
currentPos = i;
}
}
$(document).bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});
$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});
});

Add class when element reaches top of viewport

I am trying to add a class to the header when an element reaches the top of the viewport but I cannot seem to find out why it is not working. I have no errors and I have checked to see that jquery is fetching the offsets and it is. Any help would be great. I would also like to know how to extend this code to any number of section's rather than stating just 6.
JS FIDDLE
$(document).ready(function () {
var project1 = $('section:nth-child(1)').offset();
var project2 = $('section:nth-child(2)').offset();
var project3 = $('section:nth-child(3)').offset();
var project4 = $('section:nth-child(4)').offset();
var project5 = $('section:nth-child(5)').offset();
var project6 = $('section:nth-child(6)').offset();
var $window = $(window);
$window.scroll(function () {
if ($window.scrollTop() >= project1) {
$("header").removeClass().addClass("project1");
}
if ($window.scrollTop() >= project2) {
$("header").removeClass().addClass("project2");
}
if ($window.scrollTop() >= project3) {
$("header").removeClass().addClass("project3");
}
if ($window.scrollTop() >= project4) {
$("header").removeClass().addClass("project4");
}
if ($window.scrollTop() >= project5) {
$("header").removeClass().addClass("project5");
}
if ($window.scrollTop() >= project6) {
$("header").removeClass().addClass("project6");
}
});
});

The method .offset(), returns an object containing the properties top and left:
{top: 1808, left: 8}
Therefore you need to access the top property in your conditional statements.
Change
if ($window.scrollTop() >= project1) { ... }
to:
if ($window.scrollTop() >= project1.top) { ... }
Updated Example
As a side note, $('section:nth-child(1)').offset() will be undefined because the section element isn't the first element (the <header> is). Use :nth-of-type rather than :nth-child. Since you're using jQuery, eq() would work too.
$(document).ready(function() {
var project1 = $('section:nth-of-type(1)').offset();
var project2 = $('section:nth-of-type(2)').offset();
var project3 = $('section:nth-of-type(3)').offset();
var project4 = $('section:nth-of-type(4)').offset();
var project5 = $('section:nth-of-type(5)').offset();
var project6 = $('section:nth-of-type(6)').offset();
var $window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= project1.top) {
$("header").removeClass().addClass("project1");
}
if ( $window.scrollTop() >= project2.top ) {
$("header").removeClass().addClass("project2");
}
if ( $window.scrollTop() >= project3.top ) {
$("header").removeClass().addClass("project3");
}
if ( $window.scrollTop() >= project4.top ) {
$("header").removeClass().addClass("project4");
}
if ( $window.scrollTop() >= project5.top ) {
$("header").removeClass().addClass("project5");
}
if ( $window.scrollTop() >= project6.top ) {
$("header").removeClass().addClass("project6");
}
});
});
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #000;
}
header.project1 {
background: red;
}
header.project2 {
background: orange;
}
header.project3 {
background: blue;
}
header.project4 {
background: green;
}
header.project5 {
background: red;
}
header.project6 {
background: blue;
}
section {
height: 900px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<section>Section 5</section>
<section>Section 6</section>

Expanding margin with header

I have a header that when you scroll down it stays in a static flow and goes away. Then when you scroll up the header appears where ever the user is on the page. This all works great, but when I am scrolling all the way up to the top, my margins are expanded due to the header and then once it reaches the very top the margin rise back up to match the header.
I have a banner image with an over-lay. Scroll down a ways and then scroll back up. You will see the changed margin with the image over-lay. Along with that the header is 'fidgety'.
What can I do so the margin always stays the same and doesn't nudge back up?
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 < 1) {
$('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;
}
<header class="nav-down">
</header>
header {
background: #F2F2F2;
height: 120px;
top: 0;
transition: top 0.5s ease-in-out;
width: 100%;
z-index: 100;
border-bottom: 1px solid #9C9C9C;
}
.nav-up {
top: -123px;
}

This is caused because when you change the position of header to fixed it causes the DOM to be nudged up the same height of header because you're header no longer effect's DOM layout.
The fix:
Would be to append margin-top with the same height of header when you apply position: fixed to your #service-img here it is in code ( Untested since you're using live site ):
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 < 1) {
$('header').css('position', 'static');
$('#service-img').css('margin-top', '0px');
}
} else {
$('header').css('position', 'fixed');
$('#service-img').css('margin-top', '120px');
}
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
EDIT:
Just tested on your site with my code using Chrome DevTools and it works fine. Hope that helped!