I'm developing a page where during the scroll, elements, at breakpoints, will stop on the screen and animate, once the final point in the scroll is reached they go back to normal scrolling page behavior.
Basically, once div X gets to the middle of the screen it position changes to fixed, and will stop at middle of the screen expanding, moving etc, as the user scrolls, and reached the final scroll point, it will stop and change from position fixed to relative staying in the same spot.
I did a prototype where once the element got to the point on the screen I wanted it to start animate, i would measure its position on the screen with the browser ruler and get the fixed position it should take from then on.
BUT this is a poor and ugly solution, with a lot of hand work.
We can get the scroll and sum up things to get the Y position, but the x position messes up for making the design responsive.
How to do with JS This change?
How to get the Fixed equivalent position of a Relative element dynamically?
🤔
I dont have much experience with JS, but I'm sure there are good solutions for this.
I think that IS the solution, to use js for changing instantaneously the position (x,y) and the position (absolute/fixed). Also I think there's a library for that but here's a sketch of a solution.
var div = document.querySelector(".dog");
var div_status = document.querySelector("#div_status");
var start = 100;
var stop = 800;
var swap = false;
window.addEventListener("scroll", function() {
var y = window.scrollY
var rect = div.getBoundingClientRect();
div_status.innerText = rect.top.toFixed() + " " + y.toFixed()
if (y >= start && y <= stop) {
div_status.style.background = "green"
if (!swap) {
div.style.position = "fixed";
div.style.top = rect.top + "px"
swap = true
}
} else {
div_status.style.background = "red"
if (swap) {
div.style.position = "absolute";
div.style.top = (y + rect.top) + "px"
swap = false;
}
}
})
body {
height: 2000px;
}
.dog {
height: 50px;
width: 200px;
border: 1px solid gray;
background: lightyellow;
line-height: 50px;
text-align: center;
position: relative;
}
#div_status {
background: red;
color: white;
position: fixed;
right: 100px;
}
<body>
<pre id="div_status">0 0</pre>
<br>
<br>
<br>
<br> keep scrolling
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="dog">Dog</div>
</body>
Answering my own question... But just learned about position:sticky,
this seems to resolve the problem with just CSS, very easy and way more smooth.
#wrap{
margin:15px;
padding:10px;
}
.d1{
width:400px;
height:500px;
}
#d2{
//background-color:red;
height:900px;
}
#d3{
width:100px;
height:50px;
border: 10px solid black;
background-color:green;
position: sticky;
top: 70px;
}
<body>
<div id="wrap">
<div class="d1"><div>Scroll Down</div></div>
<div id="d2" >
<div id="d3" class="content">I'm the guy...</div>
</div>
<div class="d1"><div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
Scroll Up</div></div>
</div>
</body>
Related
I've just revamped my tooltip code due to issues with the position altering depending on the size of it's parent (mostly due to using offsetX/Y instead of pageX/Y, but page was being weird, too). So I decided to just have one tooltip for each of my site's pages, parented to the main div, and just feed it different text depending on what the mouse is hovering over (I'll be dealing with the visibility part later).
And it's worked quite well so far, but the only issue is that, the smaller I make my window, the farther the tooltip is from my mouse, until it's not even in view anymore.
Here's the JavaScript coding I've done for it.
var body = document.getElementsByClassName("test");
var tooltip = document.getElementById("tooltip");
body[0].addEventListener("mousemove", tooltipMove)
function tooltipMove(event) {
var x = event.pageX;
var y = event.pageY;
tooltip.style.top = (y + -900) + "px";
tooltip.style.left = (x + -875) + "px";
}
The CSS coding for the tooltip:
.tooltip {
visibility: hidden;
width: 170px;
background-color: white;
background-image: url("images/tooltipbackground.png");
color: black;
text-align: center;
border-style: groove;
border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
border-radius: 2px;
padding: 5px 5px;
position: absolute;
z-index: 1;
}
.notfound:hover .tooltip {
visibility: visible;
}
And the HTML:
<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
<h1>TEST</h1>
<img src="images/pagenotfound.png">
</div>
<div style="width: 1px; height: 1px; position: relative;">
<span class="tooltip" id="tooltip">testing</span>
</div>
I should mention the body's (which has the "notfound" class) height is 900px, and it's width 600px, in case that's one of the problems.
The 1 pixel div is just what I'm using to "host" the tooltip, not sure if it's causing any problems as well. I inspected the page in order to see it, and it never seemed to slide around with the window size.
Any sort of help would be greatly appreciated. I've tried to switch it from pageX/Y to clientX/Y, but it's the same issue. And using offset causes it's position to shift depending on what I'm hovering over, which is the reason I'm revamping the code in the first place.
I've also tried to change the tooltip's position from absolute to, well, anything else (after resizing it's parent so it doesn't get squashed), but that hasn't helped.
Another thing I should mention is that, for some reason, the shifting doesn't seem to happen in the Y axis, it's only when I squish the window horizontally that the tooltip shifts, at least from what I've noticed.
I had thought changing the tooltip's position to fixed had made it disappear, but I just couldn't see it due to the massive repositioning I had done to it. Once I deleted that it was visible and fine, and better yet, it stays in it's proper position no matter the screen size!
Also note: I had to change pageX/Y to clientX/Y, as using page made the tooltip shift vertically when squished.
<div style="height: 1px; width: 1px; position: relative;">
<span class="tooltip" id="tooltip" style="position: fixed;">Placeholder</span>
</div>
for (i = 0; i < tip.length; i++) {
tip[i].addEventListener("mousemove", tooltipMove)
tip[i].addEventListener("mouseleave", defaultVis)
}
function tooltipMove(event) {
var x = event.clientX;
var y = event.clientY;
tooltip.style.visibility = "visible";
tooltip.style.top = (y + -50) + "px";
tooltip.style.left = (x + -200) + "px";
}
function defaultVis() {
tooltip.style.visibility = "hidden";
}
All I want is to do is to make one element on the page (a div is easiest) scroll slower or faster than the other items on the page. For example, when scrolling, this particular div will move at 50% or 200% of the speed of the other items, etc.
It seems like such a simple, straightforward thing, but I can't find any examples of this. Also, I don't want to use JQuery, someone else's sketchy / overly complicated 3rd party plugin, etc. Just simple, clean, CSS and JS.
Ok, so thanks #ajaypane for the answer, but I actually figured out an even simpler way of doing this. I can't believe that nobody has done this - it's far less complicated than everything else I've seen.
JS
function parallax() {
var s = document.getElementById("floater");
var yPos = 0 - window.pageYOffset/5;
s.style.top = 50 + yPos + "%"; }
window.addEventListener("scroll", function(){
parallax();
});
CSS
.section { position: relative; width: 100vw; height: 15vw; }
.object-in-3d {
margin-left: 45vw;
width: 10vw;
height: 10vw;
background-color: #41ebf4; }
.float-center {
position: absolute;
top: 50%; }
#red { background-color: #f44141; }
#yellow { background-color: #f48342; }
#green { background-color: #f4dc41; }
#floater {}
HTML
<div class="section" id="red"> </div>
<div class="section" id="yellow">
<div class="object-in-3d float-center" id="floater"> </div>
</div>
<div class="section" id="green"> </div>
It's in codepen, here:
https://codepen.io/escapetomars/pen/EeLmpp
So I have managed to come up with this which is not too complex, however, it does scroll relative to the users scroll speed, but does work with scroll wheel, scrollbars, and keyboard.
It also scrolls up and down.
You can change the speed to suit your needs, but 10 worked for keeping it pretty much in view all the way down for my scroll speed, but left it behind when faster or using Page Down.
document.addEventListener("DOMContentLoaded", function DomContentLoaded(){
//Get the element you want to slow down;
var slowDiv = document.getElementById('slowDiv');
//Set its style.top to be the offsetTop so if style.top is not set, it will still work.
slowDiv.style.top = slowDiv.offsetTop + 'px';
//set the last scrollTop to use for direction
var lastScrollTop = 0;
//Get the element you are scrolling against
var relativeSpeedDiv = document.getElementById('main');
var moveLittle = function MoveLittle(speed, scrollY) {
//Get the current top of the slow element
var topVal = parseInt(slowDiv.style.top);
//Check scroll direction
if (isScrollingDown(scrollY)) {
topVal = topVal + speed;
} else {
topVal = topVal - speed;
}
//Set new top of slow element
slowDiv.style.top = topVal + 'px';
};
var isScrollingDown = function IsScrollingDown(scrollY) {
var retVal = false;
if (scrollY > lastScrollTop) {
retVal = true;
}
lastScrollTop = scrollY;
return retVal;
};
window.onscroll = function WindowScroll() {
//Send speed and current scroll Y
moveLittle(10, this.scrollY);
}
});
.biggestBig {
margin: auto;
align-self: center;
width: 90%;
min-height: 9999em;
}
.faded {
background: linear-gradient(gray, black);
}
.slow {
width: 2em;
height: 2em;
background-color: #ee9b0b;
position: absolute;
}
<div id="mainDiv" class="biggestBig faded">
<div id="slowDiv" class="slow"></div>
</div>
I am trying to lock the green box to the very top of the when a user scrolls through the content. However, when you scroll there is a gap on top of the green box (as shown in the demonstration)
I've tried to set position to fixed for the green box, but it jumps out of the red box. So it needs to remain absolute.
Please look at the example I've set it up live here http://jsfiddle.net/jpXjH/839/
OR look at the code here
<div style="padding: 20px 0px; background-color:cyan;">
This is a header with some random content
</div>
<div style="width:480px; height:1400px; overflow:hidden; margin:auto;
border:1px solid gray; position:relative; background-color: #ff5d5d; ">
<div id="locked">
This element needs to be on the very top LOCKED when scrolled down.
However you can see there is a gap in the very top when you scroll.
</div>
</div>
<style>
#locked{
background-color: limegreen;
padding:10px;
width:150px;
position:absolute;
top:0;
right:0;
}
</style>
<script>
window.onscroll = changePos;
function changePos() {
var locked = document.getElementById("locked");
if (window.pageYOffset > 30) {
locked.style.position = "absolute";
locked.style.float = "right";
locked.style.top = pageYOffset + "px"
} else {
locked.style.position = "";
locked.style.top = "";
}
}
<script>
Thanks in advance
Simplest solution I can think of is to subtract the height of the locked bar at the top from the header.style.top you alter in your JS:
header.style.top = pageYOffset - 76 + "px"
obviously you can get the height directly from the element instead of hardcoding it.
Your body or html tag probably has some padding/margin on it. Check if it does, and then account for it by substracting the amount from the window.pageYOffset global.
You also need to account for the height of any element that comes before the red div.
Why you don't try to use position fixed, like:
#header{
background-color: limegreen;
padding:10px;
width:150px;
position:fixed;
top:0;
right:0;
}
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
if (window.pageYOffset > 30) {
//header.style.position = "absolute";
header.style.float = "right";
//header.style.top = pageYOffset + "px"
} else {
header.style.position = "";
header.style.top = "";
}
}
And if you and to be aligned with red container you can calculate with JS.
I'm currently doing a javascript parallax page. I've managed to set the background image and 2 other pictures(#content,#content2).
When i scroll all the way down past my content and then to my content2, I want my webpage to end there. However I'm able to scroll down infinitely.
Can anyone please look at my code and tell me what i need to add or change so that my webpage ends and stops scrolling after content2.
Please note that my #image is my main background and the content and content2 are separate images that go over my background but i want my page and scrolling to stop at content2.
Code:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height:690px;
width: 100%;
margin-top:-10px;
background:url(http:/chicago_bulls_wallpaper_backgrounds.jpg);
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center center;
}
#content2 {
top:710px;
height:570px;
width: 100%;
margin-top:-10px;
background:url(All.jpg);
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center center
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex() {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * 1 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
<img id="image" src="black-glass.png" height="710px" width="100%" />
<div id="content"></div>
<div id="content2"></div>
It's because your parallax factor is 1, meaning that the background is moving exactly with the screen. Thus, the browser thinks that it always has room and can always afford to scroll down, which is actually a pretty hilarious bug.
If you were intending true parallax scrolling, set your factor to less than 1, like this:
image.style.top = ypos * 0.95 + 'px';
If you simply didn't want your background to move at all with the rest of the page, set the body's background to this image (as you already do with the divs), and set the background-attachment property to fixed - no JavaScript required.
Is something like this what you are wanting? I am not having a problem with infinite scrolling.
http://codepen.io/vinsongrant/pen/advzww
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/The_City_London.jpg" height="710px" width="100%" />
<div id="content">
<h1>Here is content 1</h1>
</div>
<div id="content2">
<h1>Here is content 2</h1>
</div>
I'm trying to build a right box who follows the user scrolling:
CSS:
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper {
border: 1px solid black;
}
.column {
float: left;
border: 1px solid red;
}
.relative {
position: relative;
margin-top: 0px;
}
HTML:
<div class="wrapper clearfix">
<div class="column">
small or big text
</div>
<div class="column">
<div class="dmap relative">a</div>
<span>some other crazy stuff</span>
</div>
</div>
Javascript:
referencey = $(".dmap").offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= referencey) {
$(".dmap").css("margin-top", y - referencey)
} else {
$(".dmap").css("margin-top", 0);
}
});
The code works just fine. The columns sizes are irrelevant, because all I do is change the margin-top, it means the columns and wrapper always gets a new size. The downside of the code is little smalls jumps while the user is scrolling.
An alternative to avoid the small jumps while scrolling is not to change the margin-top, but change the position of the box to fixed after y >= referencey. The downside of the solution is a very buggy behavior relative to the columns sizes, because when I change the class to fixed, it's does not occupy space inside the right column anymore, if the left column is smaller, a whole set of new bugs appear.
I came up with a solution that don't fix the problem, but work around it. What I have done is to scroll the box after the user stop scrolling. A different effect but no little jumps (and it looks cool too).
var scrolly = $(".dmap").offset().top;
var scroll = false;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (scroll) {
clearTimeout(scroll);
}
scroll = setTimeout(function () {
$(".dmap").animate(
{ marginTop: (y >= scrolly ? y - scrolly : 0) },
{ queue: false, duration: 200 }
);
}, 100);
});
It one simple line; position: fixed;
This means that the object is fixed to the page so it follows when you scroll.