Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
​
  <title>Fixed Header Test : fixed CSS</title>
  <meta name="description" content="TODO">
  <meta name="author" content="TODO">
​
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
​
​
</head>
​
<body>
  <div class="dev-header-fixed">
    Site Header
  </div>
  <div class="dev-wrapper">
    <div class="fc-col-left-wrapper">
      <img src="https://www.evernote.com/l/ATNKBAu-SK5POI8VL_JXTkp8p5Cb1jCoSosB/image.png" width="345" height="207" alt="" />
    </div>
    <div class="fc-col-right">
      <div class="fc-menu-container">
        Lorem ipsum dolor sit amet, sonet viris eu nec. Eros maiestatis consetetur sit in, te electram tincidunt abhorreant nec. Cum ut nihil putent. Alia discere gubergren quo ne. Quo accumsan gubergren cu, posse delectus ei nec. Ea sit diam harum, mutat ridens sea ne.
​
        An vim facilisi temporibus, in has definitiones concludaturque. Quo autem causae ex, in persius definitiones per. Ei semper oblique comprehensam ius. Praesent periculis deterruisset an pro, vis eu habemus dissentias. Partem deleniti senserit qui ei.
      </div>
    </div>
  </div>
  <div class="add-to-cart">
    Add to Cart
  </div>
  
</body>
</html>
​
​
 
body {
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
​
.dev-header-fixed {
  background-color: #2c2c2c;
  height: 112px;
  font-size: 34px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 112px;
}
​
.dev-wrapper {
  -webkit-overflow-scrolling: touch;
}
​
.fc-col-left-wrapper {
  background-color: #ffff00;
  height: 283px;
  width: 100%;
}
.fake-background {
  background-color: #eaea00;
  height: 283px;
  display: none;
}
​
.fc-col-right {
  background-color: #00ffff;
  height: 1038px;
  font-size:36px;
  -webkit-overflow-scrolling: touch;
}
​
.add-to-cart {
  background-color: #ff0000;
  width: 100%;
  height: 46px;
  position: fixed;
  top: auto; 
  bottom: 0px; 
  vertical-align: baseline;
  line-height: 46px;
  font-family: sans-serif;
  color: #ffffff;
  text-align: center;
  display: block;
  z-index: 99;
}
​
.contents {
  height: 283px;
  width: 100%;
}
​
 
function mobileScrolling() {
  var docScrollTop = $(window).scrollTop();
  //console.log(docScrollTop);
  var $fixableTop = $('.fc-col-left-wrapper');
  var $mobileMenu = $('.fc-menu-container').parent();
​
​
  if (docScrollTop >= $('.dev-header-fixed').height()) {
    console.log('Fixed header state');
    $fixableTop.css({
      'position': 'fixed',
      'top': 0,
      'z-index': 99,
      'display': 'block'
    });
​
    var menuTop = $fixableTop.outerHeight(true);
    console.log(menuTop);
    $mobileMenu.css({
      'position': 'relative',
      'top': menuTop,
      'z-index': 98,
      'padding-bottom': menuTop + 112
    });
​
  } else {
    console.log('Header Not Fixed State');
    $fixableTop.removeAttr('style');
    $mobileMenu.removeAttr('style');
  }
}
​
​
$(function() {
  $(document).on('scroll', mobileScrolling);
​
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antunpro
0viewers