Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have the following code which applies .upper class to #top-btn and it appears at the bottom when the user scrolls down by a certain amount and removes it when they scroll back up. It animates #top-btn from the bottom of the page.
However when the class is removed while scrolling up, I want it to animate back down. The way I have it it just blinks away (because the class upper is just removed).
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
$animation.removeClass('upper');
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>
Instead of removing .upper you should add a class .lower which will have bottom:-30px;. If you don't know height of the button then you can set it from jquery.
Then your jquery will become like this:
( $(this).scrollTop() > offset ) ?
$animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn.lower {
bottom:-30px;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>
You can call a function in conditional operator for removing the class and scroll the page down. something like this:
( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
scrollDown();
function scrollDown(){
$('#top-btn').removeClass('upper');
//here goes the code to scroll down//;
}
Related
I have implemented a scroll to top arrow using Jquery, and its working perfectly. But my problem is when I set body, html to 100% height it hides itself.
Check this fiddle here
Html is as follows,
<body>
<main id="top">
........
main content goes here
....
</main>
<!-- goto top arrow -->
Top
</body>
CSS
body, html {
overflow-x: hidden;
height: 100%; /* when I remove this, it works */
}
main {
height:100%;
position: relative;
overflow-y: auto;
}
.goto-top {
display: inline-block;
height: 40px;
width: 40px;
bottom: 20px;
right: 20px;
position: fixed;
border-radius:50%;
overflow: hidden;
white-space: nowrap;
opacity:0;
z-index:999;
background:#CCCCCC;
visibility: hidden;
color:#111111;
}
When I remove 100% height from html,body element, It works perfectly. I am totally confused. What should be the CSS for .goto-top, html and body?
Note:
I wanted to keep body,html height to 100% (Its required - not min-height)
You need to remove overflow : hidden; on the body see the code below :)
var offset = 300, /* visible when reach */
offset_opacity = 1200, /* opacity reduced when reach */
scroll_top_duration = 700,
$back_to_top = $('.goto-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('goto-is-visible') : $back_to_top.removeClass('goto-is-visible goto-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('goto-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
body, html {
height : 100%;
}
main {
height:100%;
position: relative;
overflow-y: auto;
height:2000px
}
.goto-top {
display: inline-block;
height: 40px;
width: 40px;
bottom: 20px;
right: 20px;
position: fixed;
padding-top:11px;
text-align:center;
border-radius:50%;
overflow: hidden;
white-space: nowrap;
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;
z-index:999;
background:#CCCCCC;
visibility: hidden;
color:#111111;}
.goto-top.goto-is-visible, .goto-top.goto-fade-out, .no-touch .goto-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;}
.goto-top.goto-is-visible {
visibility: visible;
opacity: 1;}
.goto-top.goto-fade-out {
opacity: .8;}
.no-touch .goto-top:hover,.goto-top:hover {
background:#FFFFFF}
.goto-top.goto-hide{
-webkit-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
visibility:hidden;}
#media only screen and (min-width: 768px) {
.goto-top {
right: 40px;
bottom: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="top">scroll below</main>
<!-- goto top arrow -->
Top
I have googled repeatedly and can not find a working answer to this query...
Website: http://miners-arms.wearepixel.co.uk/job-vacancies/
When you scroll down the page of this site the header changes. What I would like to know is, how can I add a fade transition when the change takes place?
Similar to this site: https://www.venndigital.co.uk/technology/
Many thanks,
With this script:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeIn(200);
}
});
You are toggling a class called parallax-window-top:
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
}
As you see, the display is the only thing that you want to transition. I think that opacity or height would be more appropriate. But also, this transition doesn't exist until you set the class. So when you toggle it off, you also remove the transition, which I think would make it fail. If display would be on and off based on the class, even if you transition opacity or height, you still couldn't see any change.
Here is a fiddle with a working example: https://jsfiddle.net/kas6r6rg/
I added a height and different transition times for opacity and height: https://jsfiddle.net/kas6r6rg/1/
Notice that removing the height value from the original CSS disables the effect. That is because transitions work on continuous properties, like numbers. Display is discreet: 'block','none'; there are no intermediate values between them.
So in your case, just change the CSS like this:
#headertop {
position: fixed;
width: 100%;
overflow: visible;
transition: opacity .5s ease;
-webkit-transition: opacity .50s ease;
-moz-transition: opacity .50s ease;
-o-transition: opacity .50s ease;
opacity: 0;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1 !important;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
/* transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;*/
}
Ok this one works form me:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tst</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style type="text/css">
.content{
height:1600px;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
display:block;
}
#headertop {
position: fixed;
width: 100%;
overflow: visible;
background-color:#808080;
display:none;
}
body {
margin: 0px;
padding:0px;
}
</style>
<script type="text/javascript">
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeOut(200);
}
});
</script>
</head>
<body>
<div id="headertop" >
HEADER
</div>
<div class="content">
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
</div>
</body>
</html>
I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.
Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>
So I'm trying to do a pop-out menu, and I have a bit of an issue.
I've applied:
.menu-side, .menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu is set to the body, and menu-side to the pop-out menu. The left of both the menu and body is changed when the pop-out menu is loaded. But for some reason it isn't easing correctly?
The problem is that the initial value of left property is auto.
Therefore, the browser doesn't know how to do the transition from auto to 180px.
To fix it, you must set it to 0 initially:
.menu {
left: 0px;
transition: left 0.2s ease;
}
.menu-open {
left: 180px;
}
.menu {
left: 0px;
transition: left 0.2s ease;
background: red;
position: relative;
height: 200px;
}
:checked ~ .menu { /* .menu-open */
left: 180px;
}
<input id="toggler" type="checkbox" />
<label for="toggler">Toggle</label>
<div class="menu"></div>
Personally I would never animate the body element itself. You should always use a wrapper, the body has some special properties and doesn't always act you would expect a div to act. However, If you manually set left: 0 on the body the transition will work.
body {
left: 0;
}
My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}
I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-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;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-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;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/
+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-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;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>