This is my the link of website http://www.expresskerala.com. In this website i need to make header sticky. Is there any way to make that sticky.I had tried this code.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
}
But when i use this code, the other content will go down. Is there any solution for this. This should be also responsive.
Since a position:fixed element is taken out of the document flow, you need to add a top margin equal to the height of the .site-header to the next element. You also need to add top:0 to fix the .site-header to the top of the document.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
top: 0;
}
.site-header + * {
margin-top: 240px;
// you should change this using media queries if the site-header height changes
}
Something like this:
#media only screen and (min-width: 1024px) {
.site-header {
position: fixed;
z-index: 1;
}
#main > .container {
padding-top: 250px;
}
}
you can add these css to get better result
body {
padding-top: 240px;
}
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
add this additional css in your file
.fixed-header {
position: fixed;
top:0;
}
than use also this script:
$(window).scroll(function(){
if ($(window).scrollTop() >= 140) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
});
/* scrollTop() >= 140
Should be equal the height of the header
*/
Try this one:
JS
$(window).scroll(function(){
if ($(window).scrollTop() >= 240) {
$('body').addClass('sticky-header');
}
else {
$('body').removeClass('sticky-header');
}
});
CSS
body.sticky-header {
padding-top: 239px;
}
body.sticky-header header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999
}
header {
transition:all ease .3s
}
Hope this may help you.
Use sticky position W3schoolor use jquery with fixed
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal
I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.
My html like that
<div class="heading-wrapper">
1
2
3
4
5
</div>
Css
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
and jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
It dont work like what I want.
If scrolling by pressing down mouse whell - it dont animate..
Animation appears at once only..
Slide up animation never appears..
If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))
Please, help me to fix this, and remember, do not judge strictly! :)
JsFiddle link
Demo
js
$(document).ready(function () {
$("header").before($("header").clone().addClass("animateIt"));
$(window).on("scroll", function () {
$("body").toggleClass("down", ($(window).scrollTop() > 100));
});
});
css
body, html {
margin:0;
padding:0;
}
header {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: #000;
color: #fff;
}
header.animateIt {
position:fixed;
top:-60px;
left: 0;
right: 0;
z-index:999;
transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
top:0;
}
.content {
padding: 0 20px 20px;
background: #fff;
line-height: 1.5;
color: #333;
}
html
<header>
1
2
3
4
5
</header>
Here's how I would do it.
First, depending on the browsers you're supporting, you could add this CSS :
.heading-wrapper {
position: fixed;
top: -80px;
transition: top 1s linear; /*as you wish*/
[...]
}
.heading-wrapper.relative {
position: absolute;
top: 0px;
}
.heading-wrapper:not(.relative).fixed {
top: 0px;
}
Then in Javascript :
var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
$wrapper.clone().appendTo("body").addClass("relative");
$win.scroll(function () {
top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if( top > 300)
setTimeout(function(){$wrapper.addClass("fixed");},0);
else if( $wrapper.hasClass("fixed") )
setTimeout(function(){$wrapper.removeClass("fixed");},0);
});
I updated your JSFiddle.
EDIT : Added a cloned menu, absolute.
I have a little problem with my sticky sidebar. When I scroll down the width automatically get's wider and I don't know why exactly.
My css looks likes this for the sidebar:
.wrapper-sticky {
height: 332px;
width: 31.66%;
margin: auto;
position: relative;
float: right;
}
.sidebar {
display:inline-block;
border-style:solid;
border-width:1px;
border-color:gray;
margin: 0;
z-index: 999;
word-spacing: 30px;
padding: 1em;
}
My javascript like this:
$(function () {
var navHeight = $('.sticky').outerHeight(true);
$('.js-sticky').stickToTop({
offset: {
top: 70
}
});
});
And I gave it 2 script links:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://sdbondi.github.io/jquery-totop/jquery-sticktotop.js"></script>
So I thought maybe you can give the width in the javascript? But how?!
Your problem is, that your width is in percentage. If you set a fixed width in px, it won't resize.
The CSS would look like this:
.wrapper-sticky { width: 275px !important; }
Does anyone know how I would - instead of having my idTabs fade - have them move from left to right? The could would need to be provided to this here: http://codebins.com/bin/4ldqp7r/2
Thanks!
The basic idea is to position the slide-out content to the left of the visible pane.
#adv2 {
...
overflow: hidden;
position: relative;
}
#adv2 ul{
...
position: relative;
z-index: 3;
}
#adv2 span {
z-index: 1;
}
#adv2 span p {
position: relative;
margin: 0;
left: -410px;
z-index: 2;
}
Then you add the javascript to render the slide out effect.
for (i in list) {
$(list[i]).css({'left': '-410px', 'display': 'none'});
}
$(id).css({'display': 'none'}).animate({left: '+=410'});