Scroll to top visibility - javascript

I'm new to Javascript and using Jquery and I ran into a problem.
I made a scroll-to-top button which should be visible when you start scrolling down. I got it to work, when I click it I smoothly scroll to the top and when you're at the top it disappears.
Only when I first load the page it's already visible, then when I scroll down it briefly disapears untill I reach the point where the element is located and it pops up again when you scroll down even more. Here is my code:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#backTop a').fadeIn();
}
else {
$('#backTop a').fadeOut();
}
});
$('#backTop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});

You'll also need to change the CSS of the button. By default, the element would be shown after all the elements before it in the HTML are displayed. You can change the CSS to ensure the element sticks to the bottom of the viewport always:
#backTop a{
position: fixed;
display: none;
bottom: 10px;
right: 10px;
}
Fixed positioning ensures that your div always stays at the same position. You can place the element by using the top, right, left and bottom rules. I've set the display to none because initially the back-to-top button should not be visible.

Related

Can't get fixed div to stop above the footer, what am I missing?

I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!
You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}

Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible

I am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):
My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).
I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.
This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div
position: fixed;
That way your nav will be fixed at the top of the window and the login form will remain at the top of the screen regardless of scrolling.
Like this:
HTML:
<div id="nav-section-wrapper">
<div id="login">...</div>
<div id="nav-wrapper>...</div>
</div>
CSS:
#nav-section-wrapper {
position: fixed;
top: 0;
z-index: 1;
}

Go back to absolute positioning when scrolling up after changing to fixed position when scrolling down

I am working on a page that has a small navigation box on the left that I would like to be always visible as the user scrolls down. I'm using the below script to get that effect and it is working great except for one problem.
When I scroll back up the box does not revert back to its absolute position but keeps the fixed position which then overlaps the beginning banner. I'm new to this idea, any ideas or suggestions on how to make the div go back to it's original settings when the user scrolls up to that point?
$(window).scroll(function(){
if ($(window).scrollTop() >= 229){ //looking for the window to scroll to 229px in this example
$('.timeline').css({position:'fixed',margin:'-250px 0 0 50px'});
} else {
$('.timeline').css({position:'absolute'});
}
});
To see the page I am working on: http://embassyofrock.com/press
You're not unsetting the margin when you revert back to absolute. I would suggest adding/removing a class instead so you don't need to worry about resetting values.
Javascript:
$(window).scroll(function(){
if($(window).scrollTop() >= 229){
$('.timeline').addClass('fixed');
} else {
$('.timeline').removeClass('fixed');
}
});
CSS:
.fixed {
position: fixed;
margin: -250px 0px 0px 50px;
}

Detect when a position: fixed; element crosses over another element

I'm wonder if its is possible to to detect when an element with the css property position: fixed; crosses over another element while scrolling. My goal is to prevent a fixed position div from ever crossing over a statically positioned footer across pages of varying height, also the footer height may change when viewed on a smaller screen.
Ideally the fixed/scrollable div would be positioned say 20px from the bottom of the window, then when a user scrolls to the footer it would stay positioned 20px above the footer.
$(window).scroll(function () {
if ($(".fixedposition").offset().top < ($(".footer").offset().top - 30)) {
$(".fixedposition").css("top", "30px");
$(".fixedposition").css("display", "block");
} else {
$(".fixedposition").css("display", "none");
}
});
see fiddle here: http://jsfiddle.net/flish/T6x4R/
Of course you should probably do something else other than set display:none; for your fixed div

css animation moves page - fix page scroll position on current element with css?

Given the following simplified problem:
foreach i in 1..100 do
<div onclick="$("div").attr('class','expand');">block i</div>
And this css:
div {
height: 20px;
transition: height 0.5s;
}
div.expand {
height: 50px;
}
Now when I click on a div, every div get's the class "expand". This means that the page will expand. However, everything will scroll down. That means that if I click on div 50, it will probably not be in my window anymore and I have to scroll down to see it again.
I would love to make the div that I clicked on stay in the center of the screen. Is this possible with CSS, or do I need JS?
it is possible ... you can use jQuery's .scrollTop() method like this:
$(window).scrollTop( $('.your_element').offset().top + $('.your_element').height() - $(window).height() );
This function scrolls the page according to the position of mouseclick:
$(document).ready(function(){
$('div').click(function(e){
var offsetY = e.pageY - $(window).scrollTop();
$('div').attr('class','expand');
$(window).scrollTop($(this).offset().top-offsetY);
});
});
Example on jsFiddle

Categories

Resources