floating div without delay - javascript

I am trying to add a floating div when user scrolling the contents, It almost working but getting little delay on the animation, I need that the floating div should animate along with scroll when scrollTop reach the floating div
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
var y = $(this).scrollTop(),
maxY = $('#footer').offset().top,
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
}
});
Fiddle link

Two issues that you can change:
Using JavaScript to animate DOM is usually slow.
Change the animate function to CSS: transform: translateY()
Select items from DOM outside of the scroll function, so it will be done only
once.
var $scrollingDiv = $("#scrollingDiv");
var $footer = $('#footer');
var $window = $(window);
$(window).scroll(function(){
var y = $(this).scrollTop(),
maxY = $footer.offset().top,
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.css({"transform": "translateY(" + ($window.scrollTop()) + "px)"});
}
});
see the fiddle link here

Related

opacity on scroll with jquery

I'm trying make the opacity of my div gradually increasing, as will moving the scroll, like this
$(document).ready(function() {
$(document).scroll(function(e) {
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade() {
var opacityPercent = window.scrollY / 100;
if (scrollPercent <= 1) {
element.css('opacity', opacityPercent);
}
}
});
is working but the opacity is uping very fast i find example decrease opacity but no uping upacity if in my rule css my div is declared opacity 0 any knwo how should be
Altered:
jsFiddle
$(document).ready(function() {
$(document).scroll(function(e){
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade(){
var opacityPercent = window.scrollY / $(document).height();
console.log(window.scrollY, opacityPercent);
element.css('opacity', opacityPercent);
}
});
The scrollY is a pixel value, so unless you limit your possible scroll range [0 - 100], there's no reason to divide it by 100.
So what you need is divide the scroll by the total document's height (or whatever it's parent that contains it and display a scrollbar)

Slide div from bottom on scroll

I'm trying to obtain this effect (you need to scroll down a bit to see the divs sliding in)
I'm not that good with JS but I managed to make the divs fade in from 0 opacity to full opacity using this code:
tiles = $(".recipe").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
Can anyone help me optain the desired effect? I need the divs to slide up from 0 opacity to 100 percent opaque, from bottom to top, when scrolling.
Hope this makes sense, thanks.
I think this is a possible solution:
var scrollCb = function () {
var tiles = $(".tile:not(.animated)");
var $window = $(window);
var b = $window.scrollTop() + $window.height();
tiles.each(function (i) {
var $this = $(this);
var a = $this.offset().top + $this.height();
if (a < b) {
$this.addClass("animated").addClass("fadeInUp");
}
});
};
$(scrollCb);
$(window).scroll(scrollCb);
http://jsfiddle.net/74u765q2/4/
animate.css realizes the animation part.
That page uses a jquery library called waypoints.
You have to download the waypoint library, this library has a lot of functions for scroll event:
for example:
$('#example-offset-percent').waypoint(function() {
notify('25% from the top');
}, { offset: '25%' });
this code triggers the notify when the object is 25% from the top of the screen.
here is the link to the page:
http://imakewebthings.com/jquery-waypoints/

Get the visible height of a div with jQuery

I need to retrieve the visible height of a div within a scrollable area. I consider myself pretty decent with jQuery, but this is completely throwing me off.
Let's say I've got a red div within a black wrapper:
In the graphic above, the jQuery function would return 248, the visible portion of the div.
Once the user scrolls past the top of the div, as in the above graphic, it would report 296.
Now, once the user has scrolled past the div, it would again report 248.
Obviously my numbers aren't going to be as consistent and clear as they are in this demo, or I'd just hard code for those numbers.
I have a bit of a theory:
Get the height of the window
Get the height of the div
Get the initial offset of the div from the top of the window
Get the offset as the user scrolls.
If the offset is positive, it means the top of the div is still visible.
if it's negative, the top of the div has been eclipsed by the window. At this point, the div could either be taking up the whole height of the window, or the bottom of the div could be showing
If the bottom of the div is showing, figure out the gap between it and the bottom of the window.
It seems pretty simple, but I just can't wrap my head around it. I'll take another crack tomorrow morning; I just figured some of you geniuses might be able to help.
Thanks!
UPDATE: I figured this out on my own, but looks like one of the answers below is more elegant, so I'll be using that instead. For the curious, here's what I came up with:
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});
Calculate the amount of px an element (height) is in viewport
Fiddle demo
This tiny function will return the amount of px an element is visible in the (vertical) Viewport:
function inViewport($el) {
var elH = $el.outerHeight(),
H = $(window).height(),
r = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}
Use like:
$(window).on("scroll resize", function(){
console.log( inViewport($('#elementID')) ); // n px in viewport
});
that's it.
jQuery .inViewport() Plugin
jsFiddle demo
from the above you can extract the logic and create a plugin like this one:
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el) {
function visPx(){
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
Use like:
$("selector").inViewport(function(px) {
console.log( px ); // `px` represents the amount of visible height
if(px > 0) {
// do this if element enters the viewport // px > 0
}else{
// do that if element exits the viewport // px = 0
}
}); // Here you can chain other jQuery methods to your selector
your selectors will dynamically listen to window scroll and resize but also return the initial value on DOM ready trough the first callback function argument px.
Here is a quick and dirty concept. It basically compares the offset().top of the element to the top of the window, and the offset().top + height() to the bottom of the window:
function getVisible() {
var $el = $('#foo'),
scrollTop = $(this).scrollTop(),
scrollBot = scrollTop + $(this).height(),
elTop = $el.offset().top,
elBottom = elTop + $el.outerHeight(),
visibleTop = elTop < scrollTop ? scrollTop : elTop,
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
$('#notification').text(`Visible height of div: ${visibleBottom - visibleTop}px`);
}
$(window).on('scroll resize', getVisible).trigger('scroll');
html,
body {
margin: 100px 0;
}
#foo {
height: 1000px;
background-color: #C00;
width: 200px;
margin: 0 auto;
}
#notification {
position: fixed;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>
The logic can be made more succinct if necessary, I've just declared separate variables for this example to make the calculation as clear as I can.
Here is a version of Rory's approach above, except written to function as a jQuery plugin. It may have more general applicability in that format. Great answer, Rory - thanks!
$.fn.visibleHeight = function() {
var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
scrollTop = $(window).scrollTop();
scrollBot = scrollTop + $(window).height();
elTop = this.offset().top;
elBottom = elTop + this.outerHeight();
visibleTop = elTop < scrollTop ? scrollTop : elTop;
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
return visibleBottom - visibleTop
}
Can be called with the following:
$("#myDiv").visibleHeight();
jsFiddle
Here is the improved code for jquery function visibleHeight: $("#myDiv").visibleHeight();
$.fn.visibleHeight = function() {
var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop, height;
scrollTop = $(window).scrollTop();
scrollBot = scrollTop + $(window).height();
elTop = this.offset().top;
elBottom = elTop + this.outerHeight();
visibleTop = elTop < scrollTop ? scrollTop : elTop;
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
height = visibleBottom - visibleTop;
return height > 0 ? height : 0;
}

Scroll div until top of footer

i've been looking for this for a couple of days but still no joy!
I would like to have a div scroll in a fixed position until it gets to the top of the footer.
Here is a fiddle of what i have so far: http://jsfiddle.net/danieljoseph/uk4mC/
I'm using this JQuery code but this uses pixels to determine when the div stops. I would like to use the top of the footer as the stop point:
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
$('#floating-container').css('top',scrollVal+'px');
if (scrollVal < 50) {
$('#floating-container').css('top','50px');
}
if (scrollVal > 2347) {
$('#floating-container').css('top','2347px');
}
});
The issue is that i am using a CMS and the client will be adding text to the page so the second value will change depending on what they add.
I hope i've been clear enough! please let me know if you require more details.
Thanks,
You have to check in the scroll event if the bottom edge of your div is lower than the footer. If it is, place the div at the position of the footer minus the height of the div.
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
container.css('top', scrollVal);
if (scrollVal < minTop) {
container.css('top', minTop);
}
if (container.offset().top > maxTop ) {
container.css('top', maxTop );
}
});
});
Fiddle
And, a much shorter variant of the script above:
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Short version fiddle.
Just read the position of the footers top when you load the page:
http://jsfiddle.net/uk4mC/1/
var footerTop = $('#text-block').position().top;
and then use that as a trigger:
if (scrollVal < footerTop) { }

Determining the distance between the top of the page and the bottom of a div

Using jQuery, how do I determine the height/distance between the very top of the browser window to the bottom of a div, such as a header. I'm using the following code:
$(window).resize(function() {
$totalHeight = $(window).height();
$headerHeight = $('header').height();
$('#portfolio-info').css('height',($totalHeight - $headerHeight - 105) + 'px');
});
And I want to make sure that $headerHeight isn't always the same value, as you scroll away from the header it should decrease all the way down to zero.
Thanks!
This should work out for you.
$(window).resize(function() {
var top = $(this).scrollTop(),
bottomDiv = $('div').offset().top + $('div')[0].offsetHeight,
distance = Math.max(0, (top - bottomDiv) * -1);
});

Categories