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;
}
Related
I'm using a bit of jquery to have a Bootstrap 4 navbar fade in when scrolling down past a certain point, by adding and removing a specific class. However, the code I have won't show the navbar if I reload the page having already scrolled down, and when scrolling back up the CSS transition doesn't fade the bar out but simply pops out of view instantly. How can I fix those issues? Would it be better to rely on purely jquery instead of relying on a CSS class? If so, how would that work? Thanks!
JS:
$(window).scroll(function(e) {
if($(window).width() >= 768)
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$('.navbar-home').addClass("navbar-hide");
} else {
$('.navbar-home').removeClass("navbar-hide");
}
});
CSS:
.navbar-home {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.navbar-hide {
opacity: 1;
visibility: visible;
}
You also need to call the same code on page load. Change the listener to:
$(window).on("scroll load", function(e) {...})
When I scroll and the anchor touches the top of the window, the background color of the box is supposed to change but I can't seem to get it to work properly.
https://jsfiddle.net/6p2pnnq4/1/
var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".footer_wrap").addClass("topper");
} else {
$(this).find(".footer_wrap").removeClass("topper");
}
};
$(window).scroll(scrollFn);
You don't need the
$(this).find
It is useless, try the following:
var targetOffset = $('#footer_wrap').offset().top,
$window = $(window);
$(window).on( 'scroll', function(){
if ( $window.scrollTop() >= targetOffset ) {
$("#footer_wrap").addClass("topper");
}else{
$("#footer_wrap").removeClass("topper");
}
});
And The CSS
#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#footer_wrap.topper {
background-color: #000;
}
Then when #footer_wrap is at the top it will change the background.
Check out the Fiddle
Im using scrolling-nav-js Scrolling nav to animate padding and fix my navbar to the top of my page and i want to give the navbar a subtle opacity animation. How can i add the transition to change the opacity property?
I have the following code in the JS and the CSS files:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
Nevermind :) adding this is perfect.
transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;
and
.top-nav-collapse {
padding: 0;
opacity: 0.6;
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
I don't know if I am specific enough,
But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.
Here is the demo:
http://jsbin.com/limiyisi/1/
HTML
<body>
<div id="overlay"></div>
<a style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">
Button </a>
<div class="ex-height"></div>
CSS
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
.backdrop {
opacity: 0.4 !important;
}
.ex-height {
height: 1204px;
}
Jquery
$(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
Thanks for any helpful advice!
Set the height of the overlay to the document's height:
$('#overlay').toggleClass('backdrop').height($(document).height());
Change the #overlay to
#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
If that doesn't quite work - try changing the bottom and right values to 100%
demo
$(function() {
function toggle() {
var pageHeight = $('html, body').innerHeight();
$('#overlay').toggleClass('backdrop').height( pageHeight );
}
$('[data-toggle="active"]').click(toggle);
});