Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Back to HTML
Preview Source Code
Download
HTML
CSS 
.header-scn h1 {
    margin: 0px;
    padding: 0px;
}

.header-scn {
    background-color: #999;
    width: 100%;
    padding: 20px 0px;
    color: #fff;
    text-align: center;
margin: 0px;
}
#footer {
  width:100%;
  height:1200px;
  background:#ccc;
  z-index:9;
  text-align: center;
  color: #000;
  font-size: 40px;
 }
 .banner-scn {
    width: 100%;
    background-color: #d7d7d7;
margin: 0px;
    padding: 0px;
 }
 .banner-inner { 
       display: flex;
    flex-flow: row wrap;
    min-height: 200px;
    align-items: center;
    justify-content: center;
}
 .banner-inner h2 {
    text-transform: uppercase;
    font-size: 40px;
 }
/**This is just typeo CSS only end**/
#sticky {
    padding: 20px;
    width: 300px;
    background-color: #333;
    color: #fff;
   margin-top: 30px;
}
#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10;
    border-radius: 0 0 0.5em 0.5em;
}
.sticky-sidebar {
    width: 300px;   
}
.sticky-sidebar ul {
    margin-top: 20px;
}
.sticky-sidebar ul li{
    font-size: 16px;
    padding: 5px 0px;

}
.sticky-sidebar ul li a {
    color: #fff;
}
.sticky-sidebar h3 {
    margin: 0px;
    font-size: 20px;
    border-bottom: #fff 2px solid;
    width: 100%;
    padding: 0px 0 10px 0;
}


.middle-cont-scn {
    display: flex;
    flex-flow: row wrap;
}

.middle-cont-scn .content-holder {
    width: calc(100% - 300px);
    padding-left: 40px;
}
@media(max-width: 767px) {
    #sticky, #sticky.stick  {
    width: 100%;
   margin-top: 30px;
   position: static ;
}
.sticky-sidebar {width: 100%;}
  .middle-cont-scn .content-holder {
    width: 100%;
    padding-left: 0;
  }  
}
JS 
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top - 40;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();
    if (window_top + div_height > footer_top)
        $('#sticky').removeClass('stick');    
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}
$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *