Repositioning Scroll to Top Button when Footer appears - javascript

There has to be a way to get my scroll to top button to treat the top of the #footer container as soon as a site user has scrolled down far enough so that the footer appears on screen, right? Right now it wants to just stay fixed in the lower left corner of the screen - which makes sense but there has to be a way to do what I'd like and as a novice I just can't seem to figure it out! Any help would be much appreciated. Thanks!
A page on my site where the button us used: http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout
Here is my script:
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
And relevant css:
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: none;
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: url('litebox-next.png') no-repeat center 50%;
background-size: 40px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .335;
}
.cd-top:hover {
background-color: transparent;
opacity: 1!important;
}
And the html:
Top

Is your goal to have the "scroll to top" button clickable when it's on top of the footer? Because all you have to do for that is set the button's z-index (a CSS property) to 100 or higher, to have it on top of the footer.
If you want to move it above the footer, I believe you can put a second conditional in $(window).scroll() that checks if scrollTop() is near the end of the page (by comparing it to $(document).height() ), and then set the button's "bottom" value to something higher (e.g. with $back_to_top.css("bottom", "200") ).

Well I figured it out! Here is what I did just in case anyone should ever encounter a similar issue. I added the following 2 if statements under $(window).scroll(function() :
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
$('.cd-top').css("position","fixed"); //resetting it
$('.cd-top').css("bottom","40px"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
$('.cd-top').css("position","relative"); // make it related
$('.cd-top').css("bottom","0"); //
}
Check it out - it now works exactly as I wanted it to! http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout

Related

Scroll to the top element does not appear after scrolling - its fixed on the bottom

I followed the code here codepen.io/rdallaire/pen/apoyx and successfully implemented the source into my site.
Everything works just fine apart from one problem. On the site I listed above, the scroll to top element appears after scrolling 40px, however, on my site the element can only be accessed if you scroll to the very bottom and I cannot figure out why the behavior is different on my page when the code is identical.
Scroll to the very bottom, and you will see the scroll to top element. https://bymw.github.io/
IMG: Here is the scroll to top element
Support would be much appreciated, thank you all!
HTML:
<i class="icon-chevron-up"></i>
CSS:
/* —— SCROLL TO TOP */
#return-to-top {
display : none;
display : block;
position : fixed;
right : 20px;
bottom : 20px;
width : 50px;
height : 50px;
-moz-border-radius : 35px;
-webkit-border-radius : 35px;
border-radius : 35px;
background : rgb(0, 0, 0);
background : rgba(0, 0, 0, 0.7);
text-decoration : none;
-moz-transition : all 0.3s ease;
-ms-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
-webkit-transition : all 0.3s linear;
transition : all 0.3s ease;
}
#return-to-top i {
position : relative;
top : 13px;
left : 16px;
margin : 0;
color : #fff;
font-size : 19px;
-moz-transition : all 0.3s ease;
-ms-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
-webkit-transition : all 0.3s ease;
transition : all 0.3s ease;
}
#return-to-top:hover {
background : rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
top : 5px;
color : #fff;
}
JavaScript:
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 40) { // If page is scrolled more than 40px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
This is due to the transform: translateZ(0); on the body element.
Remove this, and the fixed "scroll to top" button will work as expected.
So why does this happen?
Let's take a look at the W3C specifications for transform, specifically the following paragraph;
For elements whose layout is governed by the CSS box model, any value
other than none for the transform also causes the element to become a
containing block, and the object acts as a containing block for fixed
positioned descendants.
In short, this is telling us that the fixed element becomes fixed to the transformed element (in your case, the body element), instead of the devices viewport.
There is also an ongoing bug report discussing if this specific behaviour is necessary, of which you can read HERE.
You may also want to add a z-index of a high number on the #return-to-top element to make sure it is always on top of other elements.

Keep div visible in the middle of the window while scrolling down and fade out after reaching a certain point

I am trying to do a simple parallax effect with jQuery and CSS.
I have 2 long divs, one is 2000px and the other is 1000px each one of those divs have a child div with text inside.
I would like to have these child divs to be centered in the middle of the visible window (not the div which is 2000px high, just the visible window) and to stay centered and in the middle while I scroll down, then fade out at a certain point before reaching the next div.
At the moment, I managed to create the html layout and the css, and made the divs to fade out on click using jQuery.
But I am unable to center them in the middle of the window and keep them fixed while I scroll down and fade them out before reaching the next div.
Maybe I can use Waypoint.js to trigger events at certain points in the scroll but how do I keep the div centered and visible to achieve the parallax effect?
DEMO https://jsfiddle.net/fmub10pv/4/
EDIT Are there any plugins (with demo) that can achieve what I want?
EDIT 2 The desired effect is something like this http://davegamache.com/parallax/
HTML
<div class="container" id="firstContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="firstDiv" class="animate text-center">
<h1>First Div</h1>
</div>
</div>
</div>
</div>
<div class="container" id="secondContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="secondDiv" class="animate text-center">
<h1>Second Div</h1>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #16191b;
color: white;
}
#firstContainer {
height: 2000px;
margin-top: 80px;
background: darkslategrey;
}
#secondContainer {
height: 1000px;
background: darkslateblue;
}
.animate {
padding: 20px;
background: mediumseagreen;
}
#firstDiv {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#secondDiv {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Javascript
$(document).ready(function() {
var current = $(window).scrollTop();
var winHeight = $(window).height();
var total = winHeight - current;
$('#firstDiv').on('click', function() {
if ($('#firstDiv').css('opacity') == 0) $('#firstDiv').css('opacity', 1);
else $('#firstDiv').css('opacity', 0);
});
$('#secondDiv').on('click', function() {
if ($('#secondDiv').css('opacity') == 0) $('#secondDiv').css('opacity', 1);
else $('#secondDiv').css('opacity', 0);
});
});
The following will check if you've passed a certain waypoint and update the opacity for how much further you scroll thereafter.
Do you mind jQuery?
$(window).scroll(function() {
waypoint = 400
if ($(document).scrollTop() > waypoint) {
alpha = 1 - (($(document).scrollTop() - waypoint) / 260) // 260 is an arbitrary number, the size determines how quickly it will fade out (reach 0)
} else {
alpha = 1
}
$("#fade").css({
"opacity": alpha
});
});
https://jsfiddle.net/mqk9xux6/
This can be achieved by creating a class that makes use of the fixed position, which then gets applied to the target element based on scroll offset. Note that the fixed position is not a block-level element, so you will need to give it a width of 95% as well to match the original design:
CSS:
.fixed {
position: fixed;
width: 95%;
}
jQuery:
$(window).scroll(function() {
if ($(document).scrollTop() > 2000) {
$('#firstDiv').removeClass('fixed');
} else if ($(document).scrollTop() <= 2000) {
$('#firstDiv').addClass('fixed');
}
});
In the above example, I've used an offset of 2000px. This means that the first DIV will stay fixed until it overlaps exactly with the second DIV. Scrolling up the page, the first DIV will stay fixed again. Hopefully this is the sort of effect you're looking for.
I've created a fiddle showcasing this here.
Hope this helps! :)
Add fade-in class to the first div initially
<div id="firstDiv" class="animate text-center fade-in">
To center the divs
#firstDiv,
#secondDiv {
position: fixed;
top: 20%;
left: 0;
right: 0;
margin : 0 auto;
height : 500px;
width : 500px;
transition: opacity 0.5s ease;
opacity:0;
}
To fade them out on scroll
$(window).scroll(function (){
var scrollPos = $(this).scrollTop();
if(scrollPos >= 2000)
$("#firstDiv").removeClass("fade-in");
if(scrollPos >= 2200)
$("#secondDiv").addClass("fade-in");
}).scroll();

JQuery image hover and click conflict

I am trying to make a zoom in effect on an image on hover and on click, the image should stay enlarged. I have a set of 5 images, and everytime I hover on each one of them, they zoom in properly and as I move my mouse, they zoom out just like I want them.
The problem is when I try to select an image. When I do this, the image should get slightly larger and stay as is and not decrease in size and go back to normal. This is where I think is the conflict between the hover and click function. Also, when I select another image, the other image which was previously zoomed in(selected) should get back to it's original size but this is also not working now due to this conflict.
I have done some searching around S.O but can't find anything that's helping me.
Below is my code:
//Item hover
$(".anItem").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
//Select Item
$(".anItem").click(function(){
$(".anItem").each(function() {
$(this).removeClass("selectedItem");
});
if($(this).hasClass("selectedItem")){
$(this).removeClass("selectedItem");
itemColor = "";
}else{
itemColor = $(this).data("color");
$(this).addClass("selectedItem");
$("#oneBtn").show();
}
});
CSS
.anItem{
width: 90%;
height: auto;
display: block;
margin: 0 auto;
cursor: pointer;
}
.transition {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
.anItem{
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
/*
.anItem:hover{
background-color: #ddd;
opacity: 0.7;
}
*/
.selectedItem{
width: 230px;
height: auto;
}
You wants something like this ?
See this fiddle
I've simplified your JS code like this :
$(function(){
//Select Item
$(".anItem").click(function(){
$('div').find('img').addClass('anItem');
$(this).removeClass("anItem");
});
});
The :hover part is done with CSS only in my code.

jQuery scrollTop jumps to top of screen

When I load the page, the div is at the top of the screen, but when I start the scroll, it jumps to where it is supposed to be.
Check out the website here:
calretirement.com/classes-test.php
CSS:
.register{position:fixed !important; bottom:120px !important; width: 340.453px;
margin-top: 29px;
}
#stickyForm2015 {-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
jQuery:
<script>
$(window).scroll(function(){
if
($(window).scrollTop() > 670){
$("#stickyForm2015").addClass("register");
}
else
{
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
<script>
$(window).on("scroll", function(){
if
($(window).scrollTop() > 2500){
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
Open to suggestions!! Need help!
If you want to animate scroll with jquery you can just do:
$('html, body').animate({scrollTop: '0'}, 400);
If you want to animate with css you need to animate from something to something, your classes don't appear to be doing that.
.original-class{
position: relative;
top: 500px;
transition: top .4s ease-in-out; //only necessary if you plan on animating back
}
.animate-original-class{
top: 0;
transition: top .4s ease-in-out;
}

Hiding Dropdown "caret" when sticky header is present

So right now I'm building out our new website, and I've programmed a nice little sticky header using javascript. Here's my Javascript.
http://dev.yoursparksource.com
<script>
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.stickyheader1').addClass("sticky");
}
else{
$('.stickyheader1').removeClass("sticky");
}
});
</script>
And my CSS for the stickyheader and .sticky added class
.stickyheader1 {
position: fixed;
width: 100%;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
height: 85px;
}
.stickyheader1.sticky {
background: rgba(0,0,0,0.80);
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}
And this works PERFECT. My problem is the dropdown menu. I styled a little CSS caret, and when you scroll down and the header background activates, the caret is on top of the header's space, and you can see it behind the semi-transperent header. (EWW! Tacky...)
What I'm wondering, is how can I target this element, as it's an :after pseudo class.. Here's the current CSS for the caret (or top triangle as some call it.)
#nav ul ul:After {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgba(0,0,0,0.40) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 20px;
}
I tried just using the same javascript with the "#nav ul ul:After", but after researching, I learned how you can't add styles to a pseudo class. Duh, I knew that, just forgot. That's all. ;-) Any assistance on getting that little caret to go away when I scroll and the stick header's bg activates? Would be a lifesaver for me. (Also, if it can animate with the opacity transition like the header, that would rock. Once I figure out how to target it, I can add the css animation.
Thanks a MILLION in advance! I love StackOverflow.
You will need JavaScript to loop through the stylesheet, find the rule for #nav ul ul:After and set its display property to none after the sticky class is added to .stickyheader1.
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.stickyheader1').addClass("sticky");
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "#nav ul ul:After" || r.selectorText == "#nav ul ul::After") {
r.style.display = 'none';
}
}
}
} else {
$('.stickyheader1').removeClass("sticky");
}
});

Categories

Resources