Develop Reference

JQuery target scrolls up or down, but not pixels

I am trying to just target the JQuery scroll up or down element. At the moment I am targeting a specific pixel but what If I want to target either scroll up or down?
Code so far is:
var $sr = $('.fixed-div');
if ($(this).scrollTop() > 44) {
$sr.css({
'position': 'fixed',
'top': '44px'
});
}
if ($(this).scrollTop() < 88) {
$sr.css({
'position': 'static',
'top': '44px'
});
}
This does not work as I scroll down the .fixed div has a element on top which is 44px but as I scroll up the element has another div (Header) on top which makes 88px. So scrolling down is fine but scroll up the element is still in the 44px position? I have used position static because when I scroll to the top I want all elements to be stacked as normal.
Any ideas?

Set div to fixed until it comes into contact with other element where it becomes absolute. Won't revert back to fixed when scrolling back up

I'm having some trouble adding a sticky on scroll "Add to Cart" area to a product page.
So far I'm able to make the selected element become position: fixed from a certain point while scrolling until it reaches a 'cutoff point' so to speak, where it becomes position: absolute.
I also have a rule written to remove the position styling when I scroll above the 'starting point' for position: fixed. All of these are written inside one function which fires on $(document).scroll(). I'll post my code below.
The rules I've written seem to be working fine except for one specific thing. When I scroll down, the element becomes fixed. When the fixed element reaches the 'cutoff point' it switches to position: absolute and stays there when I continue scrolling. This is what I want.
The problem is when I start scrolling back up past the 'cutoff point' the element's positioning doesn't switch back to position: fixed. It stays position: absolute until I reach the top of the page where the styling is removed. I can then scroll down again and it will start all over again, fixed > absolute > not reverting back to fixed on scroll up.
function checkOffset() {
var div1 = $(".ProductMain");
var div2 = $(".SideRelatedProducts");
var div3 = $("#cssmenu");
var div1_top = div1.offset().top;
var div2_top = div2.offset().top;
var div3_top = div3.offset().top;
var div1_bottom = div1_top + div1.height();
var div2_bottom = div2_top + div2.height();
var div3_bottom = div3_top + div3.height();
// This is what removes styling assigned from scrolling, when element gets back to top of page
if (div1_bottom >= div3_bottom && $(window).width() > 900) {
$('.ProductMain').css({
'position': 'absolute',
'top': 'auto',
'bottom': '55px'
});
console.log('ABSOLUTE');
}
// This is what removes styling assigned from scrolling, when element gets back to top of page
if ($(document).scrollTop() > $('.main').offset().top + 20 && $(document).scrollTop() + div1.height() < (div2_top + 75) && div1_bottom < div3_bottom && $(window).width() > 900) {
$('.ProductMain').css({
'position': 'fixed',
'top': '60px',
'bottom': 'auto'
}); // restore when you scroll up
console.log('FIXED');
}
// This is what removes styling assigned from scrolling, when element gets back to top of page
if($(document).scrollTop() < $('.main').offset().top && $(document).scrollTop() + window.innerHeight < div2_top || $(window).width() < 900) {
$('.ProductMain').removeAttr('style');
}
}
$(document).scroll(function() {
checkOffset();
});
Thanks for your help!

This seems to be answered already. Please try this answer here:
Using jQuery to keep scrolling object within visible window

Keep postion Y when opening offcanvas menu

I have an offcanvas menu and a container with content. When I scroll down the website and open and close the menu I'm tryng to keep the scrolled position on exactly the position I was at. Right now when closing the menu it scrolls back to the top of the site.
That is caused by some css styling I gave to the container to prevent scrolling I guess.
When I console.log offsetY then it shows when closing the menu 0 as offset.
So what I'm I doing wrong?
So what I have is this:
mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.addClass('nav-open');
$('.push-content, .offcanvas').addClass('nav-open');
var offsetY = window.pageYOffset,
$win = $(window),
$body = $('.container-fluid') ; // the content container
// Block scrolling
$body.css({
'position': 'fixed',
'top': -offsetY + 'px'
});
$win.scrollTop(offsetY);
});
$('.mobile-trigger').on('click', function(){ // btn to close menu again
var offsetY = window.pageYOffset,
$win = $(window),
$body = $('.container-fluid') ;
$body.css({
'position': 'relative',
'top': -offsetY + 'px'
});
mainHeader.removeClass('nav-open');
$('.push-content, .offcanvas').removeClass('nav-open');
});
Any help greatly appreciated.

I find it easier to make a class, for instance .no-scroll, and make the overflow-y property hidden. This will keep the content from being scrolled either direction and when you close the menu you can just remove the class. Also, by doing this it should maintain your current scroll position.

jQuery - Stop listening for scroll down

So I am using this code to perform tasks when the user scrolls:
function myFunction(){
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
// scrolling downwards
hypeDocument.showSceneNamed('Section 2', hypeDocument.kSceneTransitionCrossfade, 1.1);
}
position = scroll;
});
return false;
}
But I would like to prevent down scrolling on one page. Is there anyway I can do this whilst allowing the scroll on the other pages? I tried using $(window).off("scroll"); but that blocks scrolling in both directions.

This will completely disable scrolling:
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
To restore:
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});

If you only wish to prevent scrolling in the vertical direction (up and down), you can set the scroll in that direction to hidden:
overflow-y: hidden
You could trigger that effect with jQuery using:
$('body').css('overflow-y','hidden');

stick div to screen if bottom of div and screen matches

Hello all I am working on a project where in a page I have to stick the div to screen (disable scrolling) when its bottom is at the bottom of screen. I have two divs in the page and both the divs are of variable height. I want to stick the div2 and scroll the div1.
<script>
var divheight
var scrolltop
var screenheight
if(divheight-scrolltop <= screenheight){
/* now stick the div wherever it is i can not
use fixed position as both the divs are floating and
fixing the position will make it to change the position*/ }
else { /*un stick the div*/ }
</script>
i dont know what to put in if and else please help me

Make a function which fire on scroll. The main aim of the function would be to see the difference between screen height and bottom of the div. Once the difference is less than or equal to zero modify the css position to fixed. This will help you
(function ($) {
$('.DIV1').scroll(function () {
var $this = $(this),
win_ht = $(window).height(),
div_ht = $this.height(),
div_bot = $this.offset().top + div_ht;
if (win_ht - div_bot <= 0) {
$this.css({
'position': 'fixed',
'bottom': '0'
})
}
});
})(jQuery);