I have a problem with my navigation bar because I am using a script to fix its position on top of the site. But base position for navigation bar isn't on top, so I configured it to jump to the top if the user scrolls the website down. This jump to top is really unnatural and I need to make it better than that. I want to make it behave more natural.
My actually scripts:
CSS:
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: fixed; // Here i tried replace it for "relative" but after this change script dont work.
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
.f-nav { // If i change upper css for position relative so i tried used here position: fixed or relative but its still dont work.
top:0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
Javascript:
$("document").ready(function($){
var nav = $('#menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
This result work but with unnatural move for first scroll than navigation menu jump to top.
I find and tried down script but it destroy my header because i dont know how to configurate for my website and it show my navigation bar only when i scroll up but if i scroll down my website so this navigation bar was hide with down script.
CSS:
body {
margin: 0;
padding: 0;
}
.fxdHdr {
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
height: 60px;
background: #d3145a;
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transformtransform 500ms ease;
transition: transform 500ms ease;
text-align:center;
line-height:60px;
}
Javascript:
var lastScroll = 0;
var scrollToStick = $("header").height();
$(window).on('scroll', function (evt) {
var newScroll = $(window).scrollTop();
$('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
lastScroll = newScroll;
});
So can you help me make a more natural movement for my navigation bar because jump from base position to top from first scroll is really horrible.
My website:
here
Few changes to be made
Note:
Header height comes to be 160px and you are adding f-nav class after 125px that may create glitch. This will give you smooth transistion.
if ($(this).scrollTop() > 160) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
CSS CHANGES
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: relative;
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
make position relative and add position in f-nav class
.f-nav{
position: fixed !important;
}
If you can or want to use jQuery-UI, one possibilty would be the .switchClass()-function:
JQuery
if ($(this).scrollTop() > 50) {
nav.switchClass( "", "f-nav", 300);
} else {
nav.switchClass( "f-nav", "", 200);
}
CSS
.f-nav {
top:0;
}
Demo
Related
I have a class over thumbnails called toolbar and I move it to the top on mouse over.
li .toolbar {
position:absolute;
top:10px;
right:0;
left:0;
overflow:hidden;
height:24px;
padding:0 10px;
color: #fff;
-webkit-transition:top .3s;
-moz-transition:top .3s;
-o-transition:top .3s;
transition:top .3s;
}
li:hover .toolbar{
top:-20px;
}
So when I move it 20 pixels to the top I also want to hide it without using z-index.
Is there any way with jQuery or pure CSS to do this?
Thank you
You can use opacity to hide the toolbar and set transition delay to make it start after a specific time
see code snippet
.li {
position: relative;
border: 1px solid #000;
height: 100px;
}
.li .toolbar {
position: absolute;
top: 10px;
right: 0;
left: 0;
overflow: hidden;
height: 24px;
width: 24px;
padding: 0 10px;
color: #fff;
background: red;
transition: top .3s .3s, opacity .3s;
}
.li:hover .toolbar {
transition: top .3s, opacity .3s .3s;
top: -20px;
opacity: 0;
}
}
<div class="li">
<div class="toolbar"></div>
</div>
You can use jQuery animation chaining.
$('.toolbar').animate({top:-20},1000).animate({'z-index': 0},1000).animate({opacity:0});
So to clarify: Each animation is happening after the last animation finishes.
Example on jsfiddle. You can see how z-index animation is working after the top animation and before opacity animation.
thanks for visiting.
I need to know how can I add in my back-to-top button a "text" saying:
"Back to top" or similar.
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
);
});
});
body {
width:100%;
height:1200px;
background-color:#242424;
margin:0;
padding:0;
}
body > div {
width:100%;
height:75px;
background-color:#393939;
text-align:center;
position:fixed;
}
.text {
font-size:40px;
color:white;
line-height:75px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 80px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%;
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 {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
color:#1769ff;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div>
<span class="text"> Scrolldown.</span>
</div>
BackToToP
<!-- Im using Back to Top from here:
https://codyhouse.co/demo/back-to-top/index.html
-->
</body>
</html>
If you see, I add "BackToTop" text but nothing happend.
I tried using different ways but I dont know how.
Thanks.
You must remove text-indent: 100%.
That will push the text back to it's original position.
EDIT:
If you then want the text to be next to the arrow you can do something like this:
.cd-top {
text-indent: 0;
width: auto;
line-height: 40px;
text-decoration: none;
font-family: Arial;
color: #FFF;
padding: 0 50px 0 20px;
background-position: right 20px center;
}
Combined with your code:
.cd-top {
display: inline-block;
height: 40px;
line-height: 40px;
width: auto;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
font-family: Arial;
text-indent: 0;
text-decoration: none;
color: #FFF;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat right 20px center;
padding: 0 50px 0 20px;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
The css property 'text-indent' is the one giving you the issue. Remove it and you will see the text. A good way to debug this kind of stuff is using developer tools and then inspecting the element.
i am new to jquery. i am making a back to top arrow for my website, i have a problem about hiding the back to top button. It always show and never hide. All i want is to hide the button first and after maybe 90px height it will show again. Please help me with this.
Here is my jquery script from the top of my header:
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0}, 800);
return false;
});
});
});
</script>
Here is my back to top HTML :
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>
my css :
#back-top {
display: block !important;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163,15,15,0.4);
border-radius: 8px !important;
}
#back-topi {
display: block !important;
font-size: 40px;
}
You have to change your CSS as well as jQuery as:
Code Snippet
$(document).ready(function(e) {
// 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 = $('#back-top');
//hide or show the "back to top" link
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'):
$back_to_top.removeClass('is-visible is-fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('is-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
body {
height: 1000px;
margin: 0;
padding: 0;
}
#back-top {
display: inline-block;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163, 15, 15, 0.4);
border-radius: 8px;
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;
}
#back-topi {
font-size: 40px;
}
#back-top.is-visible,
#back-top.is-fade-out,
#back-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;
}
#back-top.is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
#back-top:hover {
background-color: #0180ca;
opacity: 1;
}
#back-top:hover,
#back-top:active,
#back-top:focus {
outline: none;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>
When you scroll you (top > 90) you need to show it with command
$("#back-top").show();
Edit
The thing is !important tag overrides display:none tag.
Just remove it (on css)
display:none;
I have a hidden panel that sits off-screen until a div gets clicked (see attached, runnable code snippet).
When this div is clicked, the panel comes on screen and the div contents (a single glyph or character) are rotated 180 degrees.
The problem is that rotation origin is around some point other than the vertical middle of the glyph. When rotation occurs, the glyph moves up several pixels.
How can I measure the glyph attributes and set the rotation origin, so that, when it rotates, it rotates around the vertical middle or center of the glyph?
var show_panel = function() {
var e = document.getElementById("panel");
if (e.classList) {
e.classList.toggle("show");
}
else {
var classes = e.className;
if (classes.indexOf("show") >= 0) {
e.className = classes.replace("show", "");
}
else {
e.className = classes + " show";
}
}
};
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", sans-serif !important;
}
#panel {
width: 300px;
/* border: 2px solid rgba(33, 33, 33, 0.0933); */
background-color: rgba(33, 33, 33, 0.0933);
position: fixed;
top: 60px;
left: -275px;
padding: 5px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#panel.show {
left: -5px;
}
#panel .controller {
position: absolute;
right: 5px;
text-decoration: none;
color: black;
font-weight: bold;
font-size: 2em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#panel.show .controller {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<html lang="en">
<body>
<p class="panel_description">Click on the "x" to trigger showing the panel. Note how the "x" does not rotate on the vertical midpoint of the glyph, but instead moves upwards</p>
<div id="panel">
<div onclick="show_panel();" class="controller">x</div>
</div>
</body>
</html>
You can achieve it by setting css propertytransform-origin: 50% 50% it will provide transformation around the center of the element. I hope this works.
Simple: don't use a glyph when you want an icon.
An icon can very easily be made to be rotationally symmetrical, making it so that when flipped over it will not "move up".
To see exactly why your "x" is not symmetrical, check this out:
.x {
display: inline-block;
background: pink;
}
.flipped {
transform: rotate(180deg);
}
<div class="x">x</div>
<div class="x flipped">x</div>
The problem I have is that on the animation of the cookies warning div i'm trying to just animate the height to do something like this:
Cookies warning on bottom
If you open my website, you can see the animation goes from height 0 to height 75px BUT it also animates from left to right also (width), why is it doing that?
I'm just animating the height not the left to right, or width property.
This is the CSS:
#cookiesWarning {
background: #fff;
-webkit-box-shadow: 0 0 35px #888;
box-shadow: 0 0 35px #888;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
height: 0px;
position: fixed!important;
z-index: 99999998!important;
left: 0!important;
width: 100%!important;
bottom: 0;
}
#cookiesWarning.active {
height: 75px;
}
And the script:
$('#cookiesWarning').addClass('active');
http://jsfiddle.net/bZcvM/
transition: height 1s;
will animate just the height.
You may use just pure CSS with a close button (always in pure CSS)
http://jsfiddle.net/bZcvM/2/
An easy solution would to set the height: 75px when then div is hidden and give it top: 100% instead of bottom: 0;
#cookiesWarning {
background: #fff;
-webkit-box-shadow: 0 0 35px #888;
box-shadow: 0 0 35px #888;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
height: 0px;
position: fixed!important;
z-index: 99999998!important;
left: 0!important;
width: 100%!important;
top: 100%;
}
#cookiesWarning.active {
top: auto;
bottom: 0
}
that way it will be hidden because it's outside the div