I have installed an infinite scroll script to my Tumblr blog, and am now in the process of adding a scroll-to-top button. I want this button to fade in once the user scrolls down past a certain point, and fade out when they scroll back up. I also want it to provide a smooth scroll, not just a jump to the top.
I am fluent with HTML and CSS, though I unfortunately know basically nothing about JavaScript and jQuery. I found this tutorial for the JS side of things which taught me how to get the desired scroll button. Everything worked great, but the only problem is that the fadeOut doesn't work - the element simply disappears. Sometimes, if I am lucky, it will start fading out a little for a microsecond or so, but then disappear.
Here is the JavaScript I'm using:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$("#gotop")
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
I have a simple anchor element in my HTML, styled in CSS using the id #gotop:
Top
CSS:
#gotop {position: fixed;
right: 2em; bottom: 2em;}
As it is, everything works fine, except for the fade out.
I've browsed the internet for similar such issues. I tried various things which I came across, though most of it was greek to me unfortunately.
Edit: I just had a thought. Is it possible that the fade out doesn't occur, because before it has time to fade out, the page has already scrolled back above the "hidden" zone and the element is immediately set to be hidden?
If anybody knows anything, it'd be much appreciated - thanks for your time!
Hope this helps
Js Fiddle Demo
$(function () {
$('#gotop').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
Okay, after some mucking around I managed to figure out the problem.
It turns out that I had set all elements on my page to have a CSS3 transition assigned to them, through use of the * selector:
* {margin: 0; padding: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;}
I did this for convenience so that any hover I had would have a nice transition. However, it seems that this was what was causing my scroll-to-top button to misfunction!
I would suggest that anybody who is having the same problem as my checks any transitions they've used, and ensure that they're not affecting the to-top button. If there are any doubts, try removing them temporarily just to check.
Hope this helps.
Related
I'm making a naviget menu like IBM's website, when mouse hover it will slidedown a pannel. I use jQuery's slidedown, and it seems work well but when you fisrt slidedown it, it will stuck for a moment like this.
And after about 0.2 second，it continue to slidedown, this time works will.
Confusely if you redo the above opreate immediately, it slidedown smoothly and not stuck. And after one minute or refrash the website it stuck again.
I check this problem for two day, and I found this may cause by the image which need some time to load, beacuse when I remove the image it works well. But I don't know how to fix it, i'm already add overflow: hidden in all parents div, even use transition to replace the jQuery slidedown but it stuck too. What's more I can't rewrite the code of this part beacuse it's written by other person and I don't really know what have he down.
There are some codes I wrote or I know how it works:
HTML:
<div class="nav-item-con clearfix <#if 1!=field.index>none</#if>">
Javascript:
if($(this).parent().index() === current) {
if(!expanded) {
expanded = true;
$(this).stop().slideDown(250);
}
else {
$('.nav-item').css('display', 'none');
$(this).css('display', 'block');
}
}
CSS:
#header-box .nav .nav-item {
position: absolute; top: 3.5rem; right: 0; left: 0;
/*background: #20273C;*/
display: none;
background: rgba(32,39,60,0.8);
I'm appreciate if you know how to solve this problem.
Here I am again, drowning in my noobness. I have been searching for literally HOURS to solve this problem! I am totally a beginner in jQuery/Javascript so I need some help.
This is what I want to do:
I have a navigation bar that when you click on a button, it hides it, then when you click again, it toggles it back, so the navigation bar is visible again. I have done this with jQuery and it works perfectly.
Now what happens is that, when you click that button and hide the navbar, I want the div content to slide to the left a few pixels and take up the full width (thus growing a bit bigger and filling up the useless whitespace, I especially want this for mobile-users). Again, this works perfectly.
However...if I click back on the famous button, the navigation bar comes back but the div content is still to the left, slightly hidden by the navbar. Whereas I want that when to navigation comes back, the div content comes back to its original place and width aswell.
Thus I have tried many many different codes but nothing seems to work! It either stays left or it just does not do anything. Although interesting and fun, it gets kind of frustrating after a few hours.
Here are a few things I have tried:
-toggle
-animate/stop
-if/else
-Get x position
I did not save any jQuery/javascript code but if need be, I shall provide a snippet. The reason I do not want to provide any code is because it is insanely LONG and confusing and complex!
As such, thank you very much in advance for your help! =)
Ah one last thing: Again, please keep in mind that you are talking to a beginner! So may you please be very specific and methodical (and keep it simple if possible ^^'), I would very much appreciate it since I have been searching for hours on Google and stackoverflow.
Oh woops I forgot! I do not use pixels for my units. I use "%" for the sake of responsiveness...I don't know if that actually works with jQuery...Enlighten me!
**ALRIGHT! Here is my super complicated fiddle...Somehow the jQuery is not working in my fiddle but it is working on my browser.
<html>Some super random code because it won't let me post fiddle without it but all my code is in the fiddle...</html>
https://jsfiddle.net/czcvucxL/1/**
you can get it done toggling a class from .content1 instead of using jquery
Demo
$(document).ready(function(){
$("#CharaCircle a").click(function(){
$("#Header").animate({width:'toggle'},350);
$("#Sidebar, #Sidebar ul li").animate({height:'toggle'},250);
$(".content1").toggleClass("fullwidth");
return false;
});
});
add this class
.fullwidth {
width: 95%;
left: 0;
margin-left: 0;
}
add these to .content1 so the div starts with 10% on the left and allow the animation(transition)
.content1{
left: 10%;
-webkit-transition: left 0.2s ease-in, width 0.2s ease-in;
transition: left 0.2s ease-in, width 0.2s ease-in;
}
EDIT: if you want it only with jquery Demo
$(document).ready(function () {
$("#CharaCircle a").click(function () {
$("#Header").animate({
width: 'toggle'
}, 350).toggleClass("hidden");
$("#Sidebar, #Sidebar ul li").animate({
height: 'toggle'
}, 250);
var properties;
var $content = $(".content1");
//build your set of properties width and marginleft
//are the ones you need to change
if ($("#Header").hasClass("hidden")) {
properties = {
width: "100%",
marginLeft: "0"
};
} else {
properties = {
width: "62%",
marginLeft: "19.4%"
};
}
$content.animate(properties, 250);
return false;
});
});
Here's a link first of all to a test page: http://www.mindevo.com/tests/tacos.html
Edit: I set up a jsfiddle to play with it as well: http://jsfiddle.net/E4Uav/1/
So I set up my page with a fixed background on the main feature div. Here's the basic framework of how the page is set up:
<div class="main"></div>
<div class="game2 dark"></div>
<div class="game3 dark"></div>
<div class="gave4 dark"></div>
Here's the corresponding css for that setup:
.main{
position: relative;
width: 100%;
height: 15em;
background: white url('../images/tacobg.png') no-repeat fixed 0 0;
padding-top:1em;
}
.game2, .game3, .game4 {
height:13.3333em;
width:100%;}
.game2 {background:rgb(0,51,16) url('../images/potatobackground.png') no-repeat 0 0em;}
.game3 {background-color: rgb(0, 1, 82);}
.game4 {background-color: rgb(255, 80, 0);}
.dark {opacity: .5;}
Now that all works just fine by itself. Then I added a bit of javascript to tell the next div to fade in once it reaches a certain point, and when I add the javascript then something gets broken.
This happens only in Chrome (also checked Chrome Canary) but not in Firefox. When you scroll down the fade in happens perfectly. Now when you scroll up for some reason the background becomes no longer fixed for a moment, you scroll all the way up and some whitespace appears above the image (which is the background color for the "main" div, not the entire page).
Here's the javascript I'm using to fade in the "game2" div:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('.dark').addClass('show');
} else {
$('.dark').removeClass('show');
};
});
});
EDIT: So just to get around that bug I learned a different way to achieve what I was trying to do....
Here's my new javascript, it skips adding / removing the classes (the transitions are really odd, and when it triggers is really slow in Chrome, but it seems to work):
$(document).ready(function(){
$(window).scroll(function(){
$('.dark').each(function(i){
var half_object = $(this).position().top + ($(this).outerHeight()/2);
var bottom_window = $(window).scrollTop() + $(window).height();
var bottom_object = $(this).position().top + $(this).outerHeight();
if(bottom_window > half_object){
$(this).animate({'opacity':'1'},200);
}
else if(bottom_object > $(window).scrollTop()) {
$(this).animate({'opacity':'.5'},200);
}
});
});
});
It could use some speeding up, it takes forever to happen in Firefox now, the second and third s which use the "dark" class don't get their opacity changed for quite some time. To the point where it would make user interaction annoying.
What is the cause of this delay? How can I speed this code up so it just triggers when the div is halfway displayed, and then when it's above the top or below the bottom of the viewport it fades back to 50% opacity?
I don't think you're doing anything wrong. It looks like a bug in Chrome? For me it fixes itself after a delay in Chrome, and doesn't occur in IE.
I have a div element with a fixed position and an ID of #topnav. I have a div below that with an ID of #container. When the user scrolls down to the point of having #container at the top of the page, I would like to have the opacity of #topnav changed to 0.3—as long as #container is at least at the top of the page.
I have found several similar posts on StackExchange, but none of them seemed to work for me.
I would prefer doing this in plain Javascript, but I can use JQuery if need be. Any help would be much appreciated. :)
I realize you asked for a JavaScript solution, but I only know how to do it in JQuery (hopefully someone else can use this to come up with a pure JS solution).
Fiddler: JS Fiddle Example
JQuery:
$(window).scroll(function () {
if ($(document).scrollTop() == 0) {
$('#topnav').removeClass('faded');
} else {
$('#topnav').addClass('faded');
}
});
CSS:
.faded
{
opacity: 0.3;
}
I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.
I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.
Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:
Would love to hear from someone who has the solution.
Thanks! :)
Here is a start http://jsfiddle.net/ZtGK6/
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.
HTML:
<div id="theDiv">Now I'm visible</div>
CSS:
body, html {
height: 200%;
}
#theDiv{
top: 30px;
left: 20px;
display: none;
background-color:#FFF000;
width:200px;
height:200px;
}
Javascript:
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/
$(function() {
var theDiv = $('#myDiv'),
scrollPos = $('body').scrollTop();
if ( scrollPos > 100 ) {
theDiv.fadeIn(500); // 500 milliseconds
} else {
theDiv.fadeOut(500);
}
});
I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.