Develop Reference

sidebar fixed only on screen size > 992px and above still not working properly

I want to create a sidebar whose position is fixed only when the screen size is 992px and above. I've made the sidebar position fixed, but when the screen is 991 down the position is still fixed. I want when the screen size is 991px and down the position is relative.
but when i refresh the page, it works normally. Is there a strange behavior with the use of this javascript code?
Anyone can help me to solved this problem?
if ($(window).width() >= 992) {
var theLoc = 150;
var links = $('.d-submenu');
var content = $('.main-content');
$(window).scroll(function () {
console.log('scroll');
if (theLoc >= $(window).scrollTop()) {
if (links.hasClass('fixed')) {
links.removeClass('fixed');
content.removeClass('fixed');
}
} else {
if (!links.hasClass('fixed')) {
links.addClass('fixed');
content.addClass('fixed');
}
}
});
}

You need to add a event listener for page resize something like
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() >= 992) { /* ... */ }
});
EDIT FOR FULL SOLUTION
function screenResize() {
if ($(window).width() >= 992) {
var theLoc = 150;
var links = $('.d-submenu');
var content = $('.main-content');
} REST OF YOUR CODE
// On page load call
screenResize();
// And recheck when window gets resized.
$(window).on('resize',function(){
screenResize();
});

Change position when scrolling until next div?

The following JavaScript seemed to work pretty well, until I discovered that the height of the div (with id="fixed") was not the same for all pages.
<script>
window.addEventListener("scroll", function() {
if (window.scrollY >= 450) {
document.getElementById('fixed').style.position = 'relative';
}
if (window.scrollY <= 450) {
document.getElementById('fixed').style.position = 'fixed';
}
});
</script>
For this reason I'd like to adjust it in a way that the position of the div would change as soon as it is scrolled into the the next div with id="next-to-fixed".
I saw another post that implemented jQuery for this, but I only want to use simple JavaScript, so if someone can illustrate me with a way to achieve this, that would be great.
Trial:
<script>
window.addEventListener("scroll",function() {
var elm1 = document.getElementById('product-essential');
if(window.scrollY >= elm1.clientHeight) {
document.getElementById('fixed').style.position = 'relative';
}
if(window.scrollY <= elm1.clientHeight) {
document.getElementById('fixed').style.position = 'fixed';
}
}
);
</script>

This is how you can read the height of a div:
var clientHeight = document.getElementById('myDiv').clientHeight;
and from here on use clientHeight.

How to make an element become fixed when 50px from the top of the screen

I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina

If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.

They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/

Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.

How to show a DIV when users reach X pixels from the bottom of the page

I'm using the code below to show a banner once users reach the bottom of the screen. Issue is that I noticed that most users don't scroll down till the end. What should I modify to show my div .banner3 at, let's say, 150px from the bottom?
Many thanks
$(document).ready(function() {
$(window).scroll(function() {
if($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$(".banner3").fadeIn()
} else {
$(".banner3").css("display","none");
}
});
});

$(window).height() + $(window).scrollTop() - 150
Easy stuff :)
You could also perhaps rewrite the code a bit nicer. The scroll event is fired many times, so you could do some caching of the selector.
$(function() {
var banner = $(".banner3");
var bodyHeight = $("body").height();
$(window).scroll(function() {
if (bodyHeight <= $(window).height() + $(window).scrollTop() - 150) {
banner.fadeIn();
} else {
banner.hide();
}
});
});

edit: forgot to hide the banner again...
http://jsfiddle.net/kasperfish/RBndE/1/
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() > $(window).height()-150){
$('.banner').fadeIn();
}else{
$('.banner').fadeOut();
}
});
});

Change CSS properties when the element passes a specific position

my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks

You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.

Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});