We Keep Coding

Move background on mouse position

I am currently building a script where the background image moves depending on the location of the mouse. I basically got this effect to work but the problem is that as soon if another div is overlaying it is not working anymore.
In the example (scroll down in snippet) you can see the difference between the two. Maybe somebody knows a solution for this where the background is still triggered on the mouse position but isn't affected because a div is overlaying?
I can add pointer-events:none to the overlaying div which works but looking for a better solution.
$(document).ready(function() {
var movementStrength = 50;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$(".hover-image").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('.hover-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
* {
margin: 0;
padding: 0;
}
.spacer {
position: relative;
width: 100%;
height: 50vh;
background: black;
}
.bg {
position: relative;
width: 100%;
min-height: 100vh;
}
.hover-image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url('https://source.unsplash.com/random') -25px -50px;
background-size: calc(100% + 50px);
z-index: 0;
}
.container {
position: relative;
}
.col-md-12 {
padding: 300px 0;
}
.col-md-12 span {
padding: 10px;
background: black;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="spacer"></section>
<section class="bg">
<div class="hover-image"></div>
</section>
<section class="spacer"></section>
<section class="bg">
<div class="hover-image"></div>
<div class="container">
<div class="">
<div class="col-md-12 text-center">
<span>
BACKGROUND NOT WORKING ANYMORE
</span>
</div>
</div>
</div>
</section>
<section class="spacer"></section>

How to center with javascript an element on y?

I am trying to make a sticky banner witn html and css and js. My html is this
window.addEventListener('scroll', function(ev) {
var distanceToTop = container.getBoundingClientRect().top;
if (container.getBoundingClientRect().top >= document.documentElement.scrollTop - screen.height + 400) {
sticky.style.top = "100px"
} else {
sticky.style.top = document.documentElement.scrollTop - screen.height + 400 + "px";
}
});
.container {
background: red;
width: 600px;
height: 100px;
position: relative;
}
.sticky {
background: blue;
width: 200px;
height: 200px;
position: absolute;
right: 0;
top: 100px;
}
<div class="container">
<div class="sticky"></div>
</div>
I would want when i scroll the window the stocky div to be center on y axis and when the distance between container and top of the page is less then 200px the two divs to be attached.
Can anyone to give me a clue?

Fixed Header when the Div above is scrolled past

I have this setup so that when the page is scrolled 400px the #headermenu becomes fixed. However the div above this one will have a variable height depending on the screen size.
I need the JS to make the #headermenu become fixed when the bottom of the div above it(#mixedheightheader) has reached the top of the window.
JSFIDDLE
Thanks in advance for you help
<div id="mixedheightheader"></div>
$(function() {    
$('#headermenu');
});
$(window).scroll(function() {    
if ($(document).scrollTop() < 400)     {        
if ($('#headermenu'))         {            
$('#headermenu');            
$('#headermenu').stop().css({
top: '0',
position: 'relative'
});        
}    
}    
else     {        
if ($('#headermenu'))         {            
$('#headermenu');            
$('#headermenu').stop().css({
top: '0',
position: 'fixed'
});        
}      
}
});
body {
height: 3000px
}
#headermenu {
width: 100%;
background: black;
min-height: 100px;
}
#mixedheightheader {
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
min-height: 200px;
overflow: hidden;
background: grey;
clear: both;
}
#below {
width: 100%;
background: darkgrey;
height: 100px;
position: relative;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mixedheightheader"></div>
<div id="headermenu"></div>
<div id="below"></div>

I have updated you fiddle:
https://jsfiddle.net/yLon2oj3/11/
$(function() {    
var isFixed = false; //This is to not fix if already fixed and reverse
$(window).scroll(function() {
var mixedHeightHeader = $('#mixedheightheader');
//This uses the offset top position and the height to calculate the bottom of your variable header
var mixedHeightHeaderBottom = mixedHeightHeader.offset().top + mixedHeightHeader.height();
var headerMenu = $('#headermenu');
if ($(document).scrollTop() < mixedHeightHeaderBottom && isFixed)     {        
if (headerMenu) {                  
headerMenu.css({
top: '0',
position: 'relative'
});  
isFixed = false;
//this is to remove the placeholder space of the fixed top nav, when its not fixed to top
mixedHeightHeader.css('margin-bottom', '0');
}    
}    
else  if ($(document).scrollTop() > mixedHeightHeaderBottom && !isFixed)   {        
if (headerMenu) {                      
headerMenu.css({
top: '0',
position: 'fixed'
});
//This holds the position that was occupied by the fixed top nav when it was a relative element, because its now taken out of the flow.
mixedHeightHeader.css('margin-bottom', headerMenu.height() + 'px');
}
isFixed = true;
}
});
});

Built a scroll controller, need to reverse it

My code allows scrolling vertically in the bottom section to control scrolling horizontally in the top section.
My jsfiddle
You'll see the colors shift through a gradient. Works pretty well. Problem is that I can't quite seem to get the inverse to work. Scrolling horizontally in the top controls scrolling in the bottom.
Any ideas?
Here's the script that makes it work:
// Add event listener for scrolling
$("#bottom").on("scroll", function bottomScroll() {
var scrolledleft = parseInt($("#bottom").scrollTop()) * 1;
console.log(scrolledleft + scrolledright)
$("#top").scrollLeft(scrolledleft + scrolledright)
})
//Move right column to bottom initially
$("#top").scrollLeft($("#top").height())
//Get actual distance scrolled
var scrolledright = parseInt($("#top").scrollLeft())

Your event handlers need to temporarily cancel each other so that they don't both fire at once. You want to calculate your position percentage based on the current scrollLeft / (width of child div - width of container), then apply that percentage to the other element, and likewise for top/height. Also I changed the height of #top to 50% in CSS.
var handler = function (e) {
var src = e.target;
// the first element that triggers this function becomes the active one, until it's done
if (!activeScroller) activeScroller = src.id;
else if (activeScroller != src.id) return;
var $b = $("#bottom");
var $t = $("#top");
var scrollH = $("#bottom-content").height() - $b.height();
var scrollW = $("#top-content").width() - $t.width();
var scrollPct = 0;
if (src.id == "top") {
if (scrollW > 0) {
scrollPct = $t.scrollLeft() / scrollW;
}
$b.scrollTop(scrollH * scrollPct);
} else {
if (scrollH > 0) {
scrollPct = $b.scrollTop() / scrollH;
}
$t.scrollLeft(scrollW * scrollPct);
}
// give all animations a chance to finish
setTimeout(function () { activeScroller = ""; }, 100);
};
var activeScroller = "";
$("#top,#bottom").on("scroll", handler);
#top {
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: red;
}
#top-content {
height: 100%;
width: 2000px;
background: linear-gradient(90deg, red, blue);
}
#bottom {
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: green;
z-index: 100;
}
#bottom-content {
height: 2000px;
width: 100%;
background: linear-gradient(0deg, orange, green);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="top">
<div id="top-content"></div>
</div>
<div id="bottom">
<div id="bottom-content"></div>
</div>

Check out this:
https://jsfiddle.net/1p7gp72h/1/
I'm not sure what your end goal is here.
$("#top").on("scroll", function topScroll() {
var scrolledleft = parseInt($("#top").scrollTop()) * 1;
$("#bottom").scrollLeft(scrolledleft + scrolledright)
});
#top {
top: 0;
right: 0;
left: 0;
width: 5000px;
height: 100%;
overflow: auto;
background: red;
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}

Scroll to left ::
$('div').scrollLeft(1000);
Scroll back to normal/ scroll to right ::
$('div.slick-viewport').scrollLeft(-1000);

How to scroll to div and pause/fix then resume scroll?

I am still very new to Jquery. I want to see how I can have one element scroll to a specific location in DOM and pause for a few scroll rotations.
here is a codepen I have been playing with - http://codepen.io/mslfire/pen/dYovBZ
Any pointers where to go from here?
here is codepen code
html
<div class="mine">
<img class="scroll-to-item" src="http://placehold.it/350x150">
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2"></div>
Here is css
.scroll-to-item {
margin: 0 auto;
position: fixed; // edit
top: 30%;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.mine {
height: 500px;
background: grey;
}
.mine2 {
height: 500px;
background: lightblue;
}
.box-outline {
margin: 0 auto;
position: relative;
top: 30%;
left: 0;
bottom: 0;
right: 0;
width: 350px;
height: 150px;
border: 5px solid red;
color: red;
text-align: center;
line-height: 150px;
}
Here is BASIC what I am Seeking to do / JS
$(document).ready(function() {
var pause = $('body').css({'overflow': 'hidden'});
var resume = $('body').css({'overflow': 'scroll'});
var x = 1200; // where x is the position to scroll to and then'pause'at
var x2 = x + 1200; // where x2 is the next position to scroll to and then'pause'at
var scrollRollTimes = 2 + scrollEvent; // where scrollRollTimes is # of times a user scrolls/moves - would be better if could be like a animation in time mil seconds 0.2s ex
var scrollEvent = $(window).scroll(); // capture event
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
]; //record the place of scroll / dom or does it?
$(scrollPosition !== x).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
$(scrollPosition !== x2).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
});
When .scroll-to-item is at x place from start - pause scroll. Pause for 'scrollRollTimes' user scrolls - resume scroll.