/-----------------------------------------------------------------------------------/
EDIT: I do NOT want to use fixed CSS positioning. It's at the bottom of the viewport
without scrolling, however I want it to follow when it gets to the top.
/-----------------------------------------------------------------------------------/
I'm making a Squeeze Page with a MASSIVE sidebar. It's got tons of testimonials and facts and pictures and stuff. However, I have a button near the top I want to follow the user down the page as they scroll. Shouldn't be too hard right?
I've got this script - which starts dragging the .followme when it hits the top of the page. However - it also pushed down all the divs beneath it. Can I tell it to target JUST .follow and no affect the divs below it?
<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
var offset = $(".followme").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $(".followme").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 100);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$(".followme").stop().animate({
marginTop: newPosition
});
} else {
$(".followme").stop().animate({
marginTop: 0
});
};
});
});
You have an easier option which doesn't require any JS\jQuery at all.
.followme {
position: fixed;
height: 30px;
width: 30px;
background-color: #FF0000;
top: 48%;
left: 0;
}
This will never affect any of the other elements of the page and doesn't require any scripting at all. Now if you need the element (followme) to for example show at a certain scroll % or any other interactivity you might think of, then you will be needing to think more creatively. But if the problem is just to let the element follow your scrolling then the above should be a good and clean solution.
Example code:
http://jsfiddle.net/bhpgC/
Related
I'm building a website with a sidebar that, once the user scrolls past a certain point it becomes fixed on the site. This code works fine.
The issue that I am coming into is that the sidebar is overlapping the footer when the user scrolls to the bottom of the page. I wrote code to detect when the bottom of the sidebar hits the same position as it's containing element - when that happens I am taking the position of the bottom of the containing element and subtract the height of the sidebar element and using that number to give the sidebar it's new "top" (while also changing the position to "absolute").
This is where I am running into the issue - once the sidebar is overtop of the footer as the user scrolls the code that is getting called alternates between the normal "fixed" position code and the "absolute" positioned code giving it this flickering effect.
For the life of me I can't figure out why the "fixed" code keeps getting called.
Here is the code:
( function( $ ) {
var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
var pos_top = sidebar_pos.top + window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
var main_pos = $('.main-content')[0].getBoundingClientRect();
var main_bottom = main_pos.bottom + window.scrollY;
var stop_pos;
var i = 0;
$(window).scroll(function(event){
var scroll = $(window).scrollTop();
var produce_pos = $('.produce')[0].getBoundingClientRect();
var pos_bottom = produce_pos.bottom + window.scrollY;
//console.log("scroll "+scroll);
//console.log("top " + pos_top);
console.log(main_bottom);
console.log('bottom ' + pos_bottom);
if( scroll >= pos_top){
if ( pos_bottom >= main_bottom ){
//if the sidebar would end up overlapping the footer
if(i == 0){
//only need to set this once, not on every scroll
stop_pos = main_bottom - $('#secondary').height() ;
}
$('#secondary').removeClass('hover').css({
position: 'absolute',
margin:0,
left: sidebar_pos.left,
top: stop_pos
});
i++;
} else {
$('#secondary').addClass('hover').css({
position: 'fixed',
left: sidebar_pos.left,
marginTop: '1.5em',
top: 20
});
setTimeout(() => {
$('*[data-widget="comet"]').addClass('active');
}, 5000);
setTimeout(() => {
$('*[data-widget="produce"]').addClass('active');
}, 7000);
}
} else if( scroll < pos_top && $('#secondary').hasClass('hover') ){ //if user scrolls up past original pos of sidebar, remove effects
$('#secondary').removeClass('hover').css({
position: 'relative',
left: 'auto',
top: 'auto'
});
i = 0;
}
});
}( jQuery ) );
I also have a codepen of the script in action.
https://codepen.io/antlaur00/pen/ExyrgYR
Any help is much appreciated! Thanks!
Well its pretty simple, just add Z-index property to your footer CSS, that way it will always overlap your sidebar .
You can refer to this article regarding the z-index property
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I want to make a div slide (in,out,left,up,right or down) when I reach a specific scrollTop() value. However, I don't want it to trigger some animation... I want the div to move with the scroll, like the effect achieved here: http://www.tioluchin.com/
so far, the "closest" I got was this:
var vistaEstandar = document.getElementById('vista');
vistaEstandar.onscroll = function() {animacionesEstandarVista()};
function animacionesEstandarVista()
{
var ypos = vistaEstandar.scrollTop;
if (($(window).width() >= 1800 && vistaEstandar.scrollTop > 6053) || ($(window).width() > 1800 && document.documentElement.scrollTop > 6053)) {
var image= document.getElementById("seccion9textoSegundo");
var toppin = ypos/6053;
image.style.top = toppin*150 + 'px';
}
else
{};
However, this doesn't work because the value I manage to set is too low.
The web I am trying to put together is long so when I multiply the value it is either too high or too low.
In the website http://www.tioluchin.com/ I want the effect the knives and food have
I went into that source code because it made me curious. I have found how they do it.
First part is catching what happens on scroll
$(document).scroll(function(){
windowScroll()
});
They have there a condition which disables it on smaller screens but that is not important here.
Second part is this:
function windowScroll(){
var st = $(document).scrollTop();
$("#aff").css({"top": 32 - st * 0.15 + "px"});
$("#aff").css({"left": 48 - st * 0.15 + "px"});
}
They have it bigger, for more elements. And this is my playground. In principle you have start with current position as an offset. "st" indicates how deep you are. st*0.15 tells you how fast the element will run from the screen.
My HTML:
<div class="wrapper">
<div id="aff" class="moving-div">
</div>
And CSS:
.moving-div {
width: 3rem;
height: 3rem;
position: relative;
top: 2rem;
left: 3rem;
background: red;
}
.wrapper {
height: 1000px;
}
I have this script. Its pretty simple. But my JS skills are shaky at best. It makes the navigation (which is positioned to the bottom of the window) scroll with the content until it reaches the top of the page then remains as fixed. Or as some would say "Sticky"
The issue im having is since my banner is 100% in height. The .followTo(830); only works on my screen resolution. How do I make followTo() find the windows current height and then follow to that height and then subtract 20px from the followTo value? That would be ideal. Can this be accomplished fairly simply?
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'fixed',
top: "20px"
});
} else {
$this.css({
position: 'absolute',
bottom: '0',
});
}
});
};
$('#mainNav').followTo(830);
Someone said I need to use var height = $(window).height() - 20; but I am not sure how to apply it and they refused to elaborate instead just downvoting my posts and refering me to the entire jquery API.. Which isnt my learning style.
Ive also attempted to use if ($(document).height() - $window.height() - $('#mainNav').scrollTop() < pos) I think im just messing up the syntax?
Just use the var height = $(window).height() - 20; in place of the 830 like this:
var height = $(window).height() - 20;
$('#mainNav').followTo(height);
Just keep in mind that the window size can change (for example the browser window gets resized or the device's orientation changes)
I have a back to top image that popups when the user scrolls beyond 280. The issue is when you reach the bottom the image is over links in the footer. So I want to change the position of the image once the user is about 90px from the very bottom of the page - I want "bottom": '35px' to be 95. The page height is always changing fyi. Code I have:
function update() {
if ($(window).scrollTop() > 280) {
$('#btt').animate({
"bottom": '35px'
}, 300);
}
else {
$('#btt').animate({
"bottom": '-80px'
}, 300);
}
}
setInterval(update, 500);
It might be better to check for the scroll position only when the page has been scrolled rather than just checking every 1/2 second.
I've put together a working demo of what I think you want here: http://jsfiddle.net/swpqpv4r/5/
Basically we need to look at the scroll position of the bottom of the window as we scroll instead of the top by using document.body.scrollTop + $(win).height(). Normaly we might want to worry about what could happen if the window were to be resized, but we calculate this each time inside of the scroll event, so it shouldn't be an issue if the window changes sizes.
Next we need to know when the top of the footer has scrolled above the bottom of the window. We can use $("#footer").position().top; to see where it's top position is.
Hopefully the code is commented enough to help explain it. Let me know if you have any questions.
HTML
<header>Top</header>
<br><br><br> <!-- Lots of these for testing -->
<footer id="footer">Bottom</footer>
<a id="btt" href="javascript:{};">Back to top</a>
JavaScript
$(function(){
//select once and re-use later
var $win = $(window);
var $btt = $("#btt");
var $foot = $("#footer");
var bttDisplay = 500;
var footerHeight = $foot.outerHeight();
var footerTop = $foot.position().top;
function updateScroll() {
var scrollBottom = document.body.scrollTop + $win.height();
if (scrollBottom >= bttDisplay && scrollBottom <= footerTop) {
//show it by setting the bottom position to 0
animateBtt(0);
}else if (scrollBottom >= footerTop) {
//move it up above the footer's top position
animateBtt(footerHeight);
}else {
//hide it by setting the bottom position to the negative value of it's height
animateBtt($btt.height() * -1);
}
}
function animateBtt(pos){
$btt.animate({
"bottom": pos
}, 300);
}
//run initially
updateScroll();
//Create a var to hold the timer
var scrollTimer = null;
$win.on("scroll",function(ev){
//when scrolling, clear the timer
clearTimeout(scrollTimer);
//Now set the timer to run a function after a small delay.
//This prevents the update from happening too many times when you scroll
scrollTimer = setTimeout(updateScroll, 50);
});
//click to scroll back up
$btt.on("click",function(){
$('html, body').animate({scrollTop:0},300);
})
});
CSS
html,body{
margin:0;
padding:0;
}
header, footer{
background: #CCC;
padding: 10px;
}
#btt{
position:fixed;
height: 30px;
width: 100px;
text-align:center;
bottom: -30px;
right:0;
background: #F00;
color: #FFF;
z-index: 1000;
}
I have a page with long content on it. Together with that there is a sidebar which has less content and at the moment if you continue scrolling down, at some point there will be just whitespace in a sidebar.
So what I tried to do is once sidebar reaches end of its content, height give it fixed position, but while there are still things to scroll give it static position.
So I've got
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0'
});
}
if (x < s) {
$('#sidebar').css({
'position': 'static'
});
}
});
This kinda works. It starts with static position, but when I scroll in any direction it changes to fixed. However I want it to remain static while there is something to scroll through (in upwards and downwards directions)
EDIT Basically it should work like this: http://jsfiddle.net/cJGVJ/12/ but without the shadow effect.
Give HTML and BODY height: 100%;
html, body{
height: 100%;
}
#sidebar{
position: absolute;
bottom: 0px;
}