Develop Reference

from fixed to scrollable with jQuery

I wanted to make a div, which is initially in a fixed position, to be scrollable after a certain div appears in the page, so I looked on the documentation of Jquery and I wrote this code:
$(window).scroll(function() {
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top - $(window).height();
if ($(window).scrollTop() >= pointscroll) {
$(".block").addClass("start-scrolling");
console.log("point of scroll reached");
} else {
if ($(".block").hasClass("start-scrolling")) {
$(".block").removeClass("start-scrolling");
}
}
});
.block {
position: fixed !important;
left: 50% !important;
height: 100px;
background-color: blue;
}
.start-scrolling {
position: absolute !important;
}
.trigger {
height: 50px;
width: 50px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">some content here</div>
other content in between
<div class="trigger">scroll from here</div>
I also made a simple Jsfiddle
unfortunate, I cannot make it work properly. when I reach the scrolling height my div just disappear suddenly instead of scrolling away up on the screen.
can you guys see what I'm doing wrong?
thank you!

It is not entirely clear what you want. But I believe that it is ...
In this case, the blue block ceases to be fixed as soon as its lower border touches the line that the yellow block touches with its upper border.
$(window).scroll(function(){
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top-$(".block").height();
if ($(window).scrollTop() >=pointscroll) {
$(".block").addClass("start-scrolling");
//console.log("point of scroll reached");
}else
{
if($(".block").hasClass( "start-scrolling")) {
$(".block").removeClass( "start-scrolling");
}
}
});
In this case, the blue block will disappear when the top border of the yellow block touches the center line of the blue block.
$(window).scroll(function(){
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top-($(".block").height())/2;
if ($(window).scrollTop() >=pointscroll) {
$(".block").addClass("start-scrolling");
//console.log("point of scroll reached");
}else
{
if($(".block").hasClass( "start-scrolling")) {
$(".block").removeClass( "start-scrolling");
}
}
});

Fix an element when it reaches the top of the screen using javascript and css

I have an element, that I wish to stick on top after it reaches the top of the screen.
<div id="HeaderWrapper">
...
<div id="Navigation">
Navigation
</div>
...
</div>
I am adding an event listener on scroll, which would call a function to check the posting of the element by using getBoundingClientRect() method. If the top or the y of the element is less then 0 relative to the viewport, then I would like to fix/stick the header. Again if its more than 0 then I would like to remove the fix position. In both the cases, I am adding and removing a class name of fixed_navbar which has the property of fix position.
document.addEventListener("scroll", function() {
const el = document.getElementById("Navigation");
let rect = el.getBoundingClientRect();
if (rect.top <= 0) {
el.classList.add("fixed_navbar");
} else {
el.classList.remove("fixed_navbar");
}
});
You can also the check the codepen demo.
When the position top of the element is more than zero it works fine. Also when scrolling down to the position where the element's top position is less than 0 it sticks to the page and has the fixed propery. But again when scrolling back to the position when the element's top is more than 0, the element still has the fixed propery and stick's to the top of the screen. How can I make the element stick to the top when it reaches the top of the screen and again when the element is below the top of the screen remove the fixed postion?

You can achieve this with CSS alone, by using:
position: sticky
When declaring position: sticky; you will also need to declare a top style (eg. top: 0;) to indicate at which point you want the element to become "stuck".
Working Example:
header {
height: 600px;
}
.navigation {
position: sticky;
top: 0;
margin-top: 150px;
}
<header>
<div class="navigation">Navigation</div>
</header>
Further Information:
position: sticky works in the following browsers:
https://caniuse.com/#feat=css-sticky

Try This
if (rect.top <= 0) {
In if condition you write rect.top < 0 that is wrong for your requirement

#Rounin provide an awesome solution. Although I fix your issue in JavaScript. you can check this
document.addEventListener("scroll", function() {
const el = document.getElementById("Navigation");
let rect = el.getBoundingClientRect();
if (rect.top <= 0) {
el.classList.add("fixed_navbar");
} else {
window.onscroll = function() {myFunction()};
function myFunction() {
if ( document.body.scrollTop < 100 ) {
el.classList.remove("fixed_navbar");
}
}
}
});
* {
margin: 0;
padding: 0;
}
#HeaderWrapper {
background: lightgrey;
height: 1500px;
}
.box {
background: skyblue;
width: 100%;
height: 100px;
}
#Navigation {
background: green;
}
.fixed_navbar {
position: fixed;
z-index: 1000;
width: 100%;
left: 0;
top: 0;
}
<div id="HeaderWrapper">
<div class="box"></div>
<div id="Navigation">
Navigation
</div>
</div>

Changing background-image onscroll

I'm trying to change the background image of an element after a certain position has been scrolled past. Here's a snippet of my code:
<body>
<script>
window.onscroll = function() {scrollBG()};
function scrollBG() {
if (document.body.scrollTop > document.getElementById("one").getBoundingClientRect().top ||
document.documentElement.scrollTop > document.getElementById("one").getBoundingClientRect().top) {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic1.jng')";
} else {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic2.jpg')";
}
}
</script>
<table id="outer">
I'm using a similar coding style to show/hide a "back to top" button after a certain scroll position that functions just fine. I don't think there's a conflict between the two (though inline scripting isn't my preferred style) because even when I remove everything related to the "back to top" button, my code still fails to function.
Is this a stupid syntactical error, or is there a more fundamental error to my approach?

I've tweaked your code a little and it's working:
jsFiddle 1
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() {scrollBG()};
function scrollBG() {
var oneTop = divOne.getBoundingClientRect().top;
if(document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop){
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg')";
} else {
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg')";
}
}
body { margin: 0; padding: 0; height: 1500px; }
#outer {
position: fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#one {
width: 100%;
height: 150px;
background-color: orange;
color: white;
position: relative;
top: 400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
However, following the above method will be inefficient as IMHO it makes an extra HTTP request for the images every time the scroll goes up and down the threshold and thus you'll see flickering every time the background images get changed.
So it'd be better if we make use of an external CSS class, i.e #outer.bg2, and just add/remove it depending on the position of the scroll and this will fetch a cached version of the image which makes it smooth [except for the first time when the image is being requested for the first time]. Like below:
jsFiddle 2
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() { scrollBG() };
function scrollBG() {
var oneTop = divOne.offsetTop;
if (document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop) {
divOuter.classList.add('bg2');
} else {
divOuter.classList.remove('bg2');
}
}
body{ margin:0; padding:0; height: 1500px; }
#outer{
position:fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top:0;
left:0;
right:0;
bottom:0;
}
#outer.bg2{
background: url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg');
}
#one{
width:100%;
height:150px;
background-color:orange;
color:white;
position:relative;
top:400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
In the above code the triggering will happen when the scroll meets the bottom of the element #one, if you want the triggering to happen according to the top edge then replace this:
var oneTop = divOne.offsetTop;
With this:
var oneTop = divOne.offsetTop - divOne.offsetHeight;
jsFiddle 3

How to activate .insertBefore on screen width change?

I have this snippet which switches the position of the secondary wrapper above the primary wrapper if the screen width is below 767px. This works great however it only works on refresh. How do I get it to work automatically when the screen width is changed?
Thanks! Total novice here.
jQuery(document).ready(function(){
if(screen.width<=767){
jQuery('body.single #secondary').insertBefore('#primary');
}
});

It seems like you are using jquery so I would recommend the .resize() method.
https://api.jquery.com/resize/
This will fire whenever the window is resized. You can have it do whatever you need at that point.
$(window).resize(function(){
If (myWindow.width() >= windowThreshold){
//do all the things...
}
});

window.addEventListener('resize', function() {
// do something with screen width
});
or with jQuery:
$(window).on('resize', function() {
// do something with screen width
})

I recommend .resize() method because you are using JQuery. This method is called whenever the window is resized.
Now, you can add you code like this.
var windowThreshold = 767;
$(window).resize(function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
});
#primary {
background-color: red;
}
#secondary {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="primary">primary</div>
<div id="secondary">secondary</div>
You also can use .on("resize", function() {})
$(window).on('resize', function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I know this has an accepted answer, but just for the record, you could let CSS do the work by using media queries and flexbox as well.
body {
display: flex;
flex-flow: column wrap;
}
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
.box {
background: tomato;
order: 1;
}
.circle {
border-radius: 50px;
background: lightblue;
order: 2;
}
#media (max-width: 767px) {
.box {
order: 2;
}
}
<div class="circle"></div>
<div class="box"></div>

When scrolling to top of div hide another div

this is what I have so far:
$("#main").each(function() {this.scrollTop = this.scrollHeight;
if ($(this).scrollTop()>0)
{
$('#navigation').addClass("nav-hide");
}
else
{
$('#navigation').addClass("nav-normal");
}
});
So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. So you could read the div without the navigation bar over it. Any ideas? Thanks.
Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/

You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. Also you don't need to add more than one class you can just add the class and remove the class. So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this:
$(window).scroll(function() {
if ($(this).scrollTop() >= $('#main').offset().top) {
$('#navigation').addClass("nav-hide");
}else {
$('#navigation').removeClass("nav-hide");
}
});
And you will just add the nav-hide class and then remove it when scrolling back up.
Here is a fiddle of this working JSFiddle Demo
I assume this is what you are looking for if not let me know so I can edit my answer.

The $(window).scroll() method executes on scroll change of the window. You can use it to hide your #navigation id selector
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#navigation').fadeIn();
} else {
$('#navigation').fadeOut();
}
});​
JSFiddle here
See the jQuery documentation for .scroll() here

function scrollpos() {
if (window.scrollY<document.getElementById('header').clientHeight) {
document.getElementById('navigation').style.display = 'block';
} else {
document.getElementById('navigation').style.display = 'none';
}
}
#navigation {
width: 100%;
height: 50px;
background-color: #586e75;
position: fixed;
z-index: 1000;
transition: transform 200ms ease;
}
header,
section {
height: 100vh;
width: 100%;
position: static;
}
header {
background: #4f4244;
}
section {
background: #222222;
}
.nav-normal {
transform: translateY(0%);
}
.nav-hide {
transform: translateY(-100%);
}
<body onscroll="scrollpos()">
<div id="navigation"></div>
<header id="header"></header>
<section id="main"></section>
</body>
do u need something like this?#Steboney