Develop Reference

How can make header sticky in wordpress

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

Using pure CSS, make a div centered until it runs into sidebar from resizing the window?

I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?

This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
» JSBin

Display element if DOMs' scrollposition is greater then xyz

I want to display a fixed element if the users scroll position is greater then a certain height. So I tried to do this:
$(document).scroll(function() {
if ($(document).scrollTop() > 700px) {
$('#trigger_lisa').css("display", "block");
}
})
To explain it, if the users focus is greater then 700px I want to display the element #trigger_lisa. The way I did the "700px" is weird, but I have no clue on how to do better.
Thanks for helping

700px is a syntax error. "700px" would be valid but wrong. Just use 700.
However, if you want to hide it again when the user scrolls back, use toggle:
$(document).scroll(function() {
$('#trigger_lisa').toggle($(document).scrollTop() > 700);
});
body {
height: 10000px;
}
#trigger_lisa {
position: fixed;
top: 0;
background: blue;
height: 200px;
width: 200px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trigger_lisa"></div>

Your code has incorrect notation, an "px" is not need for this case, "700" must be a number. In general case your code works:
$(document).scroll(function() {
if($(document).scrollTop()>700)
{
$('#trigger_lisa').css("display","block");
}
});
.wrapper {
height: 3000px;
}
#trigger_lisa {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -50px;
width: 100px;
height: 20px;
background-color: #323232;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="trigger_lisa"></div>
</div>
https://jsfiddle.net/Romanzhivo/p7bcjvm4/1/

Fixed positioned element with the same distance to another element when browser window is larger

I am struggling all afternoon to resolve a problem. Maybe this is a common question but I could not find anything similar in here or on Google. I hope you guys can help.
I have a fixed positioned element on the left of the page and I want that the distance between that element and another on the page be always the same when the browser window is larger. How can I do it?
Now, the other element has to be set in percentage while the fixed element can be or not with pixels.
Is there any css calc(), javaScript, jQuery, something you can think of to resolve this?
HTML
<div class="fixed"></div>
<div class="left-element"></div>
CSS
body {
margin: 0;
padding: 0;
border: 1px solid black;
min-height: 2000px;
min-width: 100%;
}
.fixed
{
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
Here is the Fiddle

I have the same solution as #Calvin Claus but with just a minor css modifcation, no javascript needed
.right-element {
width: calc(100% - 400px);
height: 200px;
background-color: yellow;
margin-left: 400px;
}
fiddle
Update: Similar, but as you asked, the calc on the fixed element.
.fixed {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: calc(75% - 200px);
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
new fiddle

I came up with a simple jquery solution:
var distanceBetwennElems = 100;
function calcRightElemWidth() {
var rightElemWidth = $(window).width() - ($('.fixed').width() + distanceBetwennElems);
$('.right-element').css("width", rightElemWidth);
}
Just call this when the document is ready and the window is resized.
Also I removed margin and width form the .right-element css, because this is done by js now:
.right-element {
height: 200px;
background-color: yellow;
float: right;
}
https://jsfiddle.net/bjrno78p/2/

You can adjust the width of the left, fixed element, using calc. Here's an example using 500px as the desired distance between the elements, and 25% as the width for the right-element.
.fixed
{
// disired distance = 500px
// right-element width = 25%
width: calc(100vw - 500px - 25%);
}
Your updated fiddle

scroll the content inside the div with fixed position using browser/page scroll bar

I have some div's with position:fixed all around the page.
one of that div has little more long content.
my aim is that I want to scroll the content inside that box, using the main browser/page scroll-bar. (its not normal overflow:auto like this)
this is the exact situation
http://s7.postimage.org/d6xl1u9mz/sample.jpg
is any plugin available ?

Without knowledge of your HTML:
<body>
<section id="bodyContent"></section>
<header></header>
<section id="lSide"></section>
<section id="rSide"></section>
</body>
#bodyContent {
box-sizing: border-box;
-moz-box-sizing: border-box;
min-height: 100%;
width: 100%;
padding: 90px 45px 0px 105px;
background-clip: content-box;
background-color: #FFFFFF;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(page_background.jpg);
background-attachment: fixed;
}
header, #lSide, #rSide {
position: fixed;
}
header {
top: 0;
width: 100%;
height: 90px;
background-image: url(page_background.jpg);
background-attachment: fixed;
}
#lSide {
left: 0;
top: 0;
height: 100%;
width: 105px;
padding: 90px 0 0 0;
}
#rSide {
right: 0;
top: 0;
height: 100%;
width: 45px;
padding: 90px 0 0 0;
}
This will force the contents of #bodyContent to sit inside the opening between the various border elements, and it will cause any overflow to trigger a scrollbar on the body element as you desire. JSFiddle

Maybe it's possible. I've created a jsFiddle which does the trick. It's not perfect, but you can develope it further... Also this snippet works only with modern browsers, but is easy to fix for older IEs too. Core code below.
JavaScript:
window.onload = function () {
var content = document.getElementById('contentwrapper'),
dimdiv = document.getElementById('scrollingheight'),
wrapHeight = document.getElementById('fixed').offsetHeight,
scroller = function () {
content.style.top = -(document.documentElement.scrollTop || document.body.scrollTop) + 5 + 'px';
return;
};
dimdiv.style.minHeight = (content.scrollHeight - wrapHeight + 2 * 5) + 'px';
window.addEventListener('scroll', scroller, false);
return;
}
CSS:
#fixed {
position: fixed;
min-width: 300px;
min-height: 200px;
max-height: 200px;
background: #fff;
left: 150px;
top: 200px;
overflow-y: hidden;
border: 1px solid #000;
}
#contentwrapper {
max-width: 290px;
position: absolute;
top: 5px;
left: 5px;
}
#scrollingheight {
position: absolute;
top: 100%;
visibility: hidden;
min-width: 1px;
}
HTML:
<div id="scrollingheight"></div>
<div id="fixed">
<div id="contentwrapper">
content
</div>
</div>
Notice, that all content in the body, but #scrollingheight, must be fixed. Constant 5 is related to #contentwrapper's top value.

AFAIK you cannot do that.
At least not without some wicked JS trickery.
Why? cause you cannot force the browser's default scrollbar height (make it smaller) to embrace some content that is inside a totally different area than the html, body (document).
My suggestion is that you build a custom scrollbar, calculate the height of your nice overflow hidden area, add it to the scrollable ratio calculation.