I want to add transitions to sticky header to my store. I want to stciky header to show from the top when the scroll is > 50. The scrollheader and coverheader classes works fine. But transitions not worked. The header just jumps to above as sticky header is enabled. The logo part is resized in sticky header by almost 80px than normal header.
Here is the code of Javascript.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
And through css I am applying css transition property. I have tried to get the results by applying height and line height to headers. But that also not works.
.coverheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
}
header {
width: 100%;
line-height: 50px;
top: 0;
z-index: 150;
}
.scrollheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
And Html code for the case is this.
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>
For the effect you give to work, the values on which css is based must change.
I prepared the following example to give you an idea.
Please note: To make it easy to understand, I have slightly extended the animation time. And I made the background black and the header white.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 82 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
html {
height: 10000px;
background: black;
}
html,
body {
padding: 0;
margin: 0;
}
.coverheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: fixed;
bottom: 100%;
transform: translateY(100%);
}
header {
display: flex;
width: 100%;
line-height: 50px;
z-index: 150;
background: white;
}
.scrollheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: relative;
transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>
Related
Trying to avoid jQuery--
I have a nav on my website that switches between a header and side-bar when the window is resized. I have some problems when I toggle the sidebar and then resize the page.
If I toggle the side-bar and resize the page, I have 2 problems:
If I toggle the side bar and expand the page, the side-bar space stays toggled with no way to collapse it.
The side-bar's content opacity will change to 0 unless I first collapse the side-bar, expand the page to a header, and then bring back to the side-bar state.
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle('active');
document.getElementById("wrapper").classList.toggle('active');
}
var width = document.body.clientWidth;
function headerResize() {
width = document.body.clientWidth;
console.log("Width: " + width);
if (width > 783) {
document.getElementById("Header-to-Hamburger-slot").innerHTML = document.getElementById("java-header").innerHTML;
document.getElementById("java-footer-slot").innerHTML = document.getElementById("java-footer").innerHTML;
} else {
document.getElementById("Header-to-Hamburger-slot").innerHTML = document.getElementById("java-hamburger").innerHTML;
document.getElementById("java-sidebar-slot").innerHTML = document.getElementById("java-sidebar").innerHTML;
document.getElementById("java-footer-slot").innerHTML = document.getElementById("filler").innerHTML;
}
}
headerResize();
window.addEventListener("resize", function(event) {
headerResize();
})
#wrapper {
position: absolute;
width: 100%;
right: 0;
transition: all 300ms ease;
}
#wrapper.active {
position: absolute;
width: 100%;
right: 260px;
transition: all 300ms ease;
}
#sidebar {
position: absolute;
right: 0px;
width: 260px;
height: 100vh;
text-align: center;
transition: all 300ms ease;
opacity: 0;
}
#sidebar.active {
right: 0px;
transition: all 300ms ease;
opacity: 1;
}
So the issue was that the resizing the page would auto-toggle the side-bar content off, but it wouldn't toggle my page wrapper back to its original position.
I just had to add
function autoCollapse() {
if (document.getElementById("wrapper").classList.contains("active")) {
document.getElementById("wrapper").classList.toggle('active');
}
}
And then place it inside my event listener
With my current code, the white bar header is at the top when the page loads up. When you scroll, it fades, and when you scroll to the top, the white header is back. So I've made some progress.
What I'm trying to get is for there to be a transparent header when the scroll is at the top: (https://i.imgur.com/5DiVZpp.png)
And for the white bar header, the main one, to be sticky and follow all the way down, like this: (https://i.imgur.com/lhlGsW6.png)
and when you scroll back up, for it to fade back to the transparent header.
CSS:
#header{position:fixed;
left:0;top:0;right:0;height:106px;z-index:100;
-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;
-ms-transition:background-color 0.2s ease-in-out;
-o-transition:background-color 0.2s ease-in-out;
transition:background-color 0.2s ease-in-out
}
#header .logo{position:absolute;left:0;top:0;width:162px;height:106px}
#header .logo a{display:block;position:absolute;left:50%;top:50%;
margin:-30px 0 0 -60px;width:120px;height:60px;
text-indent:-99999px;
background-image:url("header_logo.png")}
#header.scroll{border-bottom:1px solid #ededed;background:#fff;} /* so this is the transparent header?
#header.scroll .logo a{background-image:url("header_logo_transp.png")}
Javascript:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc == 0) {
$("#header").addClass("scroll");
//document.removeElementbyId(header); when I put this line in, the header wasn't there when the page first loads up-- kind of what I want, but I want the secondary header to be up there when sc==0
}
else {
$("#header").removeClass("scroll");
}
});
HTML:
<div id="header" class="scroll" style="top: 0px;">
<h1 class="logo">WEBSITE</h1>
The issue you're having may be due to the nature of 'scroll'. It doesn't get every single pixel value. Changing your if statement a little to include 1 as a check will help ensure the classes are added and removed when they should be.
Example: https://codepen.io/SROwl/pen/Mdbwpy
HTML:
<div class="container">
<div class="nav top">Nav Top</div>
</div>
SCSS:
body {
background: #000;
padding: 0;
margin: 0;
}
.container {
height: 4000px;
}
.nav {
background: lightgray;
padding: 15px;
height: 50px;
width: 100%;
border: 1px solid gray;
transition: 250ms ease;
&.top {
color: #fff;
background: transparent;
}
&.fixed {
position: fixed;
background: #fff;
}
}
jQuery:
$(window).on('scroll', function(){
var winTop = $(window).scrollTop(),
if (winTop >= 1) {
$('.nav').addClass('fixed').removeClass('top');
} else if (winTop <= 0) {
$('.nav').addClass('top').removeClass('fixed');
}
})
I'm in the middle of making my website and I got a little road bump. This is how my code looks right now, and what I want to do is have the "About" box right below the "Home" box and have the above box slide down with the description that comes when you click the "Home" box. How may I do that?
This is the code to my JS file.
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides upwards 40pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides righ under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides upwards 40pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides righ under "one"
}
});
});
On a complete side note, how could I get the boxes to start from the top of the page and how could I make he box be a huge box rater than a tiny strip of color?
you can try this one:
.container {
overflow:hidden;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.three{
position: relative;
top: 0;
background-color: #E9A1B9;
z-index: 1;
cursor:pointer;
}
.four {
position: relative;
top: -18px;
background-color: #02C9C9;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
DEMO HERE
I would use a negative margins and toggle a simple .open class on the .one and .three divs :
$(".one, .three").click(function(){
$(this).toggleClass('open');
});
CSS :
.one, .three {
margin-bottom: -40px;
-webkit-transition: margin-bottom 1s;
-moz-transition: margin-bottom 1s;
-o-transition: margin-bottom 1s;
transition: margin-bottom 1s;
}
.open {margin-bottom: 0}
jsFiddle demo
You can simplify this a bit by using the jQuery toggle() function to do the work for you. (edit: you could also use slideToggle() for a different effect)
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
html
<div class="container">
<div class="one">Main</div>
<div class="two" style="display: none">Welcome to my page!</div>
<div class="three">About</div>
<div class="four" style="display: none">All about me</div>
</div>
css
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
background-color: yellow;
}
.three{
background-color: #E9A1B9;
cursor:pointer;
}
.four {
background-color: #02C9C9;
}
js
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").toggle("slow");
});
$(".three").on('click', function(){
$(".four").toggle("slow");
});
});
DEMO:
https://jsfiddle.net/qbuatjrm/4/
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);
});
I need to do with an animation that is intially the image will be on full screen whenver i click on the screen it will popin an go to a div. for this i haved used te following code.
<div class="header_relative">
<header id="cover_photo_header" class="large">
<img></img>
</header>
</div>
styles:
<style>
header_relative
{
position:relative
}
header, a, img{
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
header.large
{
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
overflow: hidden;
z-index: 19;
}
header.small
{
position: fixed;
overflow: hidden;
z-index: 19;
}
</style>
Javascript:
window.addEvent('click', function(){
$('global_content').getElement('header.large').style.width = '770px';
$('global_content').getElement('header.large').style.height = '300px';
$('global_content').getElement('header.large').style.margin = 'auto';
$('global_content').getElement('header.large').style.top = '-294px';
$('global_content').getElement('header.large').style.left = '29.1%';
setTimeout(function(){
//do what you need here
$('global_content').getElement('header').removeClass("large").addClass("small");
func, delay
}, 2000);
});
But he animation is changing on left.Can you guys help me howto come out of this