I came accross the following fiddle which let elements fade out of the document 1 by 1 as they reach the top.
By executing javascript:
$(window).scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/JdbhV/6/
Only this is working on the full window, I want it to work on a div tag. So I modified the fiddle to add the div test and all other divs inside there, then modify the javascript to grab the div instead of the window:
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/JdbhV/1692/
But now they fade too fast and not when they reach the top of the div.
Does someone have a pointer what is going wrong here?
The .offset() method allows us to retrieve the current position of an element relative to the document.
Scrolling the window doesn't change the position of elements in the document however scrolling elements inside another element does. This causes the offset position to change which throws off the check to see if box is at the top of the scroll view.
Try using the .position() method which gets the position relative to the parent.
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
//When the top of the square goes above the top of the scroll element, fade it out
if ($(this).position().top < 0) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/ys0m6axL/
The reason is that jQuery turns the divs transparent. However the divs are still there, which means their height still counts.
So, in particular for this case, the only thing you need is the subtraction. Using 20 minus the height of divs (which is 100px) and spaces between divs (which is 100px as well), you have 200px in total for each div (and the space around it).
Try the code below, and see if it works.
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
Good luck.
Try with using div top instead scrollTop in the calculation.
I have changed the calculation in this line :
if (($(this).offset().top - $("#test").offset().top) < 20) {
JSFIDDLE : http://jsfiddle.net/JdbhV/1697/
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").offset().top) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
Here are the jsfiddle example.
You just need to change the condition
from
$(this).offset().top - $("#test").scrollTop()) < 20
To
$(this).offset().top < $("#test").offset().top
$("#test").offset().top
is the height that determine when to do the fade action.
For now that is the top of the container #test.
Related
In the javascript below the following line should find the height of the dropdown-container element in it's slideDown() / visible state. However, it appears to be doing the opposite when the button is clicked and the dropdown expands the height returned is 1 (I have tested this by uncommenting the line at the end of the function). When the button is clicked again to collapse the dropdown the height is, for example, 681. Why is this the case and is there any way to assess the expanded height correctly within this function when the button is clicked to expand the dropdown container please?
$(this).next(".dropdown-container").css("height")
Here is the javascript in full:
$(document).ready(function () {
var dropdown = $(".dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () {
$(".dropdown-btn").not(this).removeClass("active");
$(".dropdown-container").slideUp();
$(this).toggleClass("active");
if ($(this).hasClass("active")) {
$(this).next(".dropdown-container").slideDown();
if (Modernizr.mq('(max-height: 750px)') || $(this).next(".dropdown-container").css("height").replace(/px/, "") > ($(document).height() - 132 - 176)) {
$(".dropdown-btn").not(this).slideUp();
}
}
else {
$(".dropdown-btn").not(this).slideDown();
}
//$('a').text($(this).next(".dropdown-container").css("height").replace(/px/, ""));
});
As per the comments above, the height needed to be assessed within the callback function, which is the second option in the slideDown method. As the code was moved the this logic also needed to be updated to be relative to the container instead of the button. Below is the code that was updated:
if ($(this).hasClass("active")) {
$(this).next(".dropdown-container").slideDown("slow", function() {
// Animation complete.
if (Modernizr.mq('(max-height: 750px)') || $(this).css("height").replace(/px/, "") > ($(document).height() - 132 - 176)) {
$(".dropdown-btn").not($(this).prev(".dropdown-btn")).slideUp();
}
});
}
I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina
If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.
They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/
Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.
need some help.
My setup:
I have a fixed Div ("myFixedDiv") that remains in place when scrolling till
"myFixedDiv" reaches another div ("footer"). Then it moves with scrolling.
The Div "myFixedDiv" is placed next to a div ("text") using: display:inline-block.
Now for my problem:
When the window is horizontally made smaller, "myFixedDiv" is vertically placed after "textDiv" as intended. Only thing is, the upper-half of "myFixedDiv" visibly overlaps "textDiv", covering part of the text. I want "myFixedDiv" to be vertically placed after "textDiv" by pushing "footer" down to allow for this.
See an example here:
JSFIDDLE
You may need to give a little scroll to make "myFixedDiv visible again after making the window smaller.
$(document).scroll(function() { var $self = $("#myFixedDiv"); $self.css('margin-top', 0); var myFixedDivOffset = $self.offset().top + $self.outerHeight(true); if (myFixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); } });
Change fixed position to relative position of the div when you resize the window and it should be good
See this fiddle
$(window).resize(function() {
$("#myFixedDiv").css('position','relative');
});
You can also add a condition based on the width of the body to change the CSS of the div to relative or fixed position.
Solved it:
$(document).scroll(function() {
var $self = $("#myFixedDiv");
$self.css('margin-top', 0);
var myFixedDivOffset = $self.offset().top + $self.outerHeight(true);
if (myFixedDivOffset > ($("#footer").offset().top - 30)) {
$self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top));
} else {
$self.css('margin-top', '30px');
}
});
$(window).resize(function() {
if ($(window).width() < 601) $("#text").css('padding-bottom', '70px'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});
$(window).resize(function() {
if ($(window).width() > 600) $("#text").css('padding-bottom', '0'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});
I am trying to make build my own carousel from scratch since I cant find a plugin that does what I want. Which is having a vertical and horizontal plugin that work at the same time both ways.
Anyway I decided to give it a shot and try to build my own. But right now I am stuck at trying to understand why my "next" button doesn't disappear when it has reached the end of the carousel.
here is the code:
$(document).ready(function() {
var sliderWidth = 300; // Give the size of the window
var sliderV = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically
var sliderCount = $(sliderV).children().size(); // Gets the size of the verticla slider
//test();
$('a.nav-top-prev').on('click',function () {
$('#slide-wrap-vertical > div').animate({
top: '+=' + sliderWidth
}, 500);
showHideDirection();
});
$('a.nav-top-next').on('click', function () {
$('#slide-wrap-vertical > div').animate({
top: '-=' + sliderWidth
}, 500);
showHideDirection();
});
function showHideDirection() {
$(sliderV).children().each(function(){ // Checks all the children of the vertical carousel
if ($(this).position().top == 0) { // Finds the index of the children that is currently on view
if ($(this).index() == 0) { // If its the first one can't scroll back and hides the prev button
$('a.nav-top-prev').hide();
}
else if ($(this).index() >= sliderCount) { // If its the last one can't scroll forward and hides the next button
$('a.nav-top-next').hide();
}
else {
$('a.nav-top-prev').show();
$('a.nav-top-next').show();
}
}
});
}
});
http://jsfiddle.net/Dethdoll/WkFVs/8/
because sliderCount is 1 based and index() is zero based, it is impossible for index to be equal or greater than sliderCount. You need to subtract one.
else if ($(this).index() === sliderCount-1)
You can simplify those if/else checks with toggle
if ($(this).position().top == 0) {
var index = $(this).index();
$('a.nav-top-prev').toggle(index!==0);
$('a.nav-top-next').toggle(index!==sliderCount-1);
}
This is a follow-up post to a previous question: jQuery - scroll down every x seconds, then scroll to the top
I have refined the scrip a little further, but am having a little trouble with the last step.
I have a div that automatically 50px at a time until it reaches the bottom, at which point it scrolls to the top and starts again. I have this working perfectly thanks to the above question and with a little add work.
I need to make all scrolling stop when the div is hovered. I have done part of this already (there is no incremental scrolling down on hover) but I cannot get the full picture. The div will still scroll to the top even when hovered.
Here is my jQuery and a fiddle to go along with it: http://jsfiddle.net/wR5FY/1/
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0 && dontScroll == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
$('#scroller').bind('scroll', function () {
if (dontScroll == 0) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
}
}
});
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});
In the fiddle, try hovering the scroller div when the yellow square is visible. You will see that it scrolls to the top.
A couple of notes:
You will notice I have used mouseenter and mouseleave rather than hover and mouseout. This was the best way I could find to ensure all child elements within the div didn't have an adverse affect.
A potential problem area is the fact that I have binded to the scroll event for my function that scrolls to the top. I think this might cause some additional problems when a user is manually scrolling through the items, with my jQuery trying to scroll against the user.
I did a little experimenting with killing setInterval, but I didn't find this to be very helpful as the function that triggers isn't the problem area.
My overall goal here is to lock down all automatic scrolling when a user is hovering or manually scrolling through the list. This is 90% there. If they happen to scroll to the bottom, NOTHING should happen until they move the mouse elsewhere - this is the problem.
Keep it easier ;)
The problem was that you first evaluate wheter dontScroll is zero, then start the timer.
When the timer has ended, it doesnt evaluate anymore, whether dontScroll STILL is zero.
Just pulled that into your scrollIt function:
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 2000);
function scrollit() {
if(dontScroll == 0){
if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
} else if(scrollingUp == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
}
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});