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.
Related
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>
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?
Working on a scroll bar that will be vertical and as we scroll down the brown bit will not fill up but move bit by bit depending on how far we scroll down. So esentially the brown bit will move three times down if we scroll to the bottom. So far I made a scroll bar that fills up but ideally I would like it to have the movable brown bit like in the example in the attached picture. Anyone able to help out?
My code so far looks like this:
window.onscroll = () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementsByClassName("scroll-bar__inner")[0].style.height = scrolled + "%";
};
.scroll-bar {
position: fixed;
top: 50%;
right: 34px;
width: 2.5px;
height: 80px;
background-color: #959595;
display: block;
transform: translateY(-50%);
}
.scroll-bar__inner:first-of-type {
height: 20%;
background: #ffffff;
}
.scroll-bar__inner:nth-of-type(2) {
/* height: 20%; */
background: #ffffff;
}
#mock-content {
width: 150px;
height: 500px;
border: 3px solid red;
border-radius: 5px;
}
<div class="scroll-bar">
<div class="scroll-bar__inner"></div>
</div>
<div id="mock-content">
This div represents some content that causes the body to scroll.
</div>
It was a bit confusing what you were trying to do with your original CSS. I couldn't see why you would alter the height of the container for the scroll bar, instead of just repositioning the block within a full heigh container (i.e. .scroll-bar__inner). In any case here is a snippet that I think accomplishes what you're trying to do:
window.onscroll = () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var containerHeight = document.getElementsByClassName("scroll-bar")[0].clientHeight;
// range from 0 to x% where x% is 100% - (80 / scroll bar height * 100)
// This makes it so the bar doesn't extend off the page.
var scrolled = (winScroll / height) * ((containerHeight - 80) / containerHeight) * 100;
document.getElementsByClassName("scroll-bar__inner")[0].style.top = scrolled + '%';
};
.scroll-bar {
position: fixed;
top: 0;
bottom: 0;
right: 34px;
width: 5px;
background-color: whitesmoke;
}
.scroll-bar__inner {
height: 80px;
background: #333;
position: relative;
}
#mock-content {
width: 150px;
height: 500px;
border: 3px solid red;
border-radius: 5px;
}
<div class="scroll-bar">
<div class="scroll-bar__inner"></div>
</div>
<div id="mock-content">
This div represents some content that causes the body to scroll.
</div>
How to fix object visibility on height scroll.
I have the following code below which grows height of the div based on user scroll. When you scroll down the spider image become invisible.
$(window).scroll(function() {
var bh = 100;
var height = $(window).scrollTop();
var sch = bh + height;
$('.webscroll').stop().animate({
'height': sch
}, 400)
if (height <= 19) {
$('.webscroll').stop().animate({
'height': 200
}, 600)
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
A woking jsfiddle sample is here: https://jsfiddle.net/ppw9z6y2/
You can use css transitions for the animation, and just change the height by javascript:
.webscroll {
...
transition: height 50ms ease-in-out
}
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 50ms ease-in-out
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
http://caniuse.com/#feat=css-transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
By looking your example, I think you want the spider to start moving after the scroll have ended, so if that's the case, check this: jQuery scroll() detect when user stops scrolling
Try moving the spider outside of its parent div and giving it a fixed position in the bottom corner; it should stay there regardless of scrolling. (You may need to tweak the behavior of the scroll/web line to look right.)
Same as hector22x. Increasing the duration to 100ms and add a 100ms delay to make it move smoothly.
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 100ms ease-in-out 100ms
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
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);