Develop Reference

Sticky div - stop scrolling at certain point

I have a fixed div that follows the page when it scrolls past the top of the page.
I would like it to stop scrolling once it reaches the bottom of a particular div. I am not great with javascript.
Basically needs to remove the class .affix. But it might need an offset so that it doesn't overlap into the layout below.
I have looked at other articles but the div starts off fixed whereas mine becomes fixed.
JSfiddle: https://jsfiddle.net/8t1ddL2h/
Javascript:
var stickySidebar = $('.sticky-sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sticky-sidebar').addClass('affix');
}
else {
$('.sticky-sidebar').removeClass('affix');
}
});
Any help would be appreciated
Lee

Try this Fiddle
$(document).ready(function() {
var $sticky = $('.sticky-sidebar');
var $stickyrStopper = $('.other-content');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});

You can also try it just add JavaScript. it will automatic calculate height of left panel. you need to change in css when it remove the css.
var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {
if ($(window).scrollTop() >= othercon-sliderheight) {
$('.sticky-sidebar').removeClass('affix');
// need to change here according to your need
}
});

Script only works properly on page refresh

I have a function that makes a side panel (.link-panel) stop when it reaches (.footer), inside (.link-panel) is (.cover). (.cover) is the div that contains all the elements of the (.link-panel) so it is fixed and technically it is the one that stops when it reaches the (.footer). My function first initializes if .control_panel is at position: inline-block. If it isn't (meaning it's display: block and the page width is <= 750px), then an else statement initializes and makes .cover's position relative.
This function is working properly only on page refresh. For example, let's say my page's size is at: 1300px. The display works correctly, but when I shrink the window size to below <= 750px, the side-menu stays fixed even if I change the css property using jQuery. The problem can only be solved if I refresh the page. Then if I start at <= 750px and resize back up, the side menu does not display correctly and I have to refresh the page again for it to display correctly.
My code
$(document).ready(function(){
var panel = $(".control_panel").css("display");
if(panel == "inline-block"){
fixedScrollBar();
}else{
$(".link-panel").css("position", "relative");
}
});
function fixedScrollBar(){
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top + -40,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 60
});
}
};
$window.resize(function()
{
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('.cover').followTo('.footer');
}

Wrap your code in a resize event, test in your scroll event if the panel is inline-block and disable the css functions if its not:
$(document).ready(function() {
$(window).resize(function() {
var panel = $(".control_panel").css("display");
if (panel == "inline-block") {
fixedScrollBar();
} else {
$(".cover").css({"position":"relative","top":0});
}
}).trigger('resize');
});
function fixedScrollBar() {
var windw = this;
$.fn.followTo = function(elem) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top + -40,
thisHeight = $this.outerHeight(),
setPosition = function() {
if($(".control_panel").css("display") == "inline-block") {
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 60
});
}
};
}
$window.scroll(setPosition);
setPosition();
};
$('.cover').followTo('.footer');
}
https://jsfiddle.net/e9dcmL2q/4/

Anchor doesn't work

I have a problem with link inside page. This is part of jQuery code I use in my page
$.fn.stopAtTop= function () {
var $this = this,
$window = $(window),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
setPosition = over;
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(function(){setPosition();});
setPosition();
};
And this is a example DEMO
When I scroll down everything works fine but when I want go to the top of the page it's impossible. I know that issue is that the script makes the div fixed, but I don't know how to fix it. Any ideas?

Add a click handler that scrolls to the top of the page:
$("[href='#one']").click(function() {
scrollTo(0, 0);
});
jsfiddle.net/jx8nmhfq/1

javascript not showing div when scrolling up

can someone please help me debugging my jquery scrolling up hiding the div
here is my javascript code
jQuery(function() { // document ready
var sideBarTop = $('#sticky').offset().top; // position top
var sideBarLeft = $('#sticky').offset().left //position left
jQuery(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns scroll from top
if(sideBarTop < windowTop) {
$('#sticky').css({position: 'fixed', top: 210, left: sideBarLeft}).fadeIn();
}
else {
$('#sticky').css('position', 'static').fadeOut("slow");
}
});
});
here is my html code
<div id="sticky">
<ul id="nav">
<li class="current">Avant</li>
<li>Allure</li>
<li>Eden</li>
</ul>
</div>
please someone help me
JSFiddle

Updated HERE.
Include below line.
jQuery(function() { // document ready
var sideBarTop = $('#sticky').offset().top; // position top
var sideBarLeft = $('#sticky').offset().left //position left
jQuery(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns scroll from top
if(sideBarTop < windowTop) {
$('#sticky').css({position: 'fixed', top: -40}).fadeIn("slow");
}
else $('#sticky').css('position', 'static').fadeOut("slow");
setTimeout ( function() { $('#sticky').fadeIn("slow"); },1000);
});
});
This is a patch for your existing code and it is not a recommended fix for you problem.

Theory behind scroll spy jquery - Identifying the section under it

I'm trying to work out how this might be done. I want to be able to identify which section I am in when scrolling through. This is what I have: http://jsfiddle.net/AgBbK/embedded/result/
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
} else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
$('body').css('padding-top', 0);
}
//active state in menu
$('.section').each(function(){
var eleDistance = $(this).offset().top;
if (currentScrollTop >= eleDistance) {
var makeActive = $(this).attr('id');
$('#select a').removeClass('active');
$('#select a.' + makeActive).addClass('active');
}
});
});
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
The issue here is, the yellow bar has to be fully inside that section for me to be able to recognize that it is in that section and set it as active. For example, if the yellow bar was sat ontop of that section or 1px into it, I would still say that section is the active one, and yet the yellow bar must be fully inside it.
Is there any efficient and logical way to achieve this?
EDIT: As an example look how this must go all the way under the menu to know which section it is in: http://jsfiddle.net/cse_tushar/Dxtyu/141/

I honestly don't get why you need a fixed menu for this purpose.
Here is a implementation of that example fiddle you posted that don't use any fixed elements.
It's way more responsive and it even have a mobile menu version for small screens.
Demo