I have a sticky div which stays on top if I scroll past it. But it resize to the full screen size and I want it to keep the same size.

Here is CSS-code for the wrapper and the sticky class:

.wrapper{
margin: 0 auto; 
width: 100%;
height: 180px;
background-color:#fff;
border-top: 0;
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
-moz-box-shadow: 0 8px 6px -6px #B8B8B8;
 box-shadow: 0 8px 6px -6px #B8B8B8;
 }

.sticky {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
padding-left: 15px;
padding-right: 15px;
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
-moz-box-shadow: 0 8px 6px -6px #B8B8B8;
box-shadow: 0 8px 6px -6px #B8B8B8;
}

And here is the JS code:

var global = {}; 

$(document).ready(function(){

var element = $(".wrapper");
    offset = element.offset();

global.top = offset.top;
global.height = element.outerHeight();

});

$(window).scroll(function () {

var scroll_top = $(document).scrollTop();

if (scroll_top > global.top ) {
    $('.wrapper').addClass('sticky');
    $("body").css({
        "padding-top": global.height
    });

} else {

    $('.wrapper').removeClass('sticky');
    $("body").css({
        "padding-top": 0
    });
}

});

I created also a fiddle: /

I have a sticky div which stays on top if I scroll past it. But it resize to the full screen size and I want it to keep the same size.

Here is CSS-code for the wrapper and the sticky class:

.wrapper{
margin: 0 auto; 
width: 100%;
height: 180px;
background-color:#fff;
border-top: 0;
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
-moz-box-shadow: 0 8px 6px -6px #B8B8B8;
 box-shadow: 0 8px 6px -6px #B8B8B8;
 }

.sticky {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
padding-left: 15px;
padding-right: 15px;
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
-moz-box-shadow: 0 8px 6px -6px #B8B8B8;
box-shadow: 0 8px 6px -6px #B8B8B8;
}

And here is the JS code:

var global = {}; 

$(document).ready(function(){

var element = $(".wrapper");
    offset = element.offset();

global.top = offset.top;
global.height = element.outerHeight();

});

$(window).scroll(function () {

var scroll_top = $(document).scrollTop();

if (scroll_top > global.top ) {
    $('.wrapper').addClass('sticky');
    $("body").css({
        "padding-top": global.height
    });

} else {

    $('.wrapper').removeClass('sticky');
    $("body").css({
        "padding-top": 0
    });
}

});

I created also a fiddle: http://jsfiddle/44ep8dz4/1/

• javascript
• jquery
• html
• css

• 2 by setting the position to fixed, you are removing it from the flow of the page and 100% in a container is not the same as 100% of the page. So if you want it to remain the same size, you need to give it a fixed width (px), which you can do in CSS or via JS. – wf4 Commented Dec 10, 2014 at 14:08
• but i have a responsive design in my mind, so I would have to work with breakpoints? – Felix Commented Dec 10, 2014 at 14:13
• 1 If you are thinking responsive @Felix I would avoid fixing anything on smaller displays as it is unreliable and can cause problems with zoom on mobile devices. – wf4 Commented Dec 10, 2014 at 14:15
• but i need it fixed, it is some kind of a game width a fixed element on top – Felix Commented Dec 10, 2014 at 14:19

1 Answer 1

You could use inherit:

.sticky {
    width: inherit;
    ...
}

For the small screen problem, add this:

@media(max-width: 768px) {
    .sticky {
        width: 100%;
    }
}

This overrides the width: inherit if the screen size is smaller than 768px.

Demo jsfiddle.