<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<header>
<div class="logo">Logo SITE</div>
<ul>
<li class="button_a">SCROLL TO "sticky_table"</li>
<li>box-1</li>
<li>box-2</li>
<li>box-3</li>
<li>box-4</li>
<li>box-5</li>
</ul>
</header>
<div class="wrap_content">
<section id="list_products">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="sticky_table">
<div class="anchor"></div>
<div class="heading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="ins-content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
<footer></footer>
</div><!--end wrap_content-->
<div id="scrollToTop">
<svg fill="#ffffff" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
</body>
* {
box-sizing: border-box;
}
.wrap_content {
margin-top: 100px;
}
header {
width: 100%;
height: 80px;
background-color: #016EB7;
display: flex;
justify-content: space-between;
transition: 0.2s;
position: fixed;
top: 0;
left: 0;
}
header .logo {
height: 100%;
display: flex;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: 600;
}
header ul {
display: flex;
justify-content: flex-end;
height: 100%;
}
header ul li {
display: flex;
width: 100px;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
}
header ul li:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
header.sticky {
height: 50px;
z-index: 999;
}
section#list_products {
height: 300px;
display: flex;
justify-content: space-around;
padding: 35px 0;
}
section#list_products > div {
width: 150px;
height: 150px;
background-color: #ccc;
}
section#sticky_table {
width: 800px;
height: 800px;
display: flex;
flex-direction: column;
padding: 20px 0px;
margin: 0 auto;
position: relative;
}
section#sticky_table .heading {
display: flex;
justify-content: space-between;
width: 100%;
height: 55px;
background-color: #EDECEC;
padding: 10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
section#sticky_table .heading > div {
width: 140px;
height: 35px;
background-color: #ff0000;
}
section#sticky_table .heading.fixed {
position: fixed;
top: 50px;
width: inherit;
z-index: 99999;
}
section#sticky_table .ins-content {
width: 100%;
height: 100%;
margin-top: 10px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
section#sticky_table .ins-content > div {
display: flex;
width: 150px;
height: 100px;
background-color: rgba(142, 193, 109, 0.7);
margin: 5px;
}
#scrollToTop {
display: none;
width: 65px;
height: 65px;
position: fixed;
bottom: 70px;
right: 40px;
background-color: rgba(1, 110, 193, 0.7);
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
#scrollToTop:hover {
background-color: #4b73aa;
}
footer {
width: 100%;
height: 150px;
background-color: #2F2F2F;
}
jQuery(document).ready(function(){
//fixed scroll header
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass('sticky');
}
else {
$('header').removeClass('sticky');
}
});
//fixed table head
var tableFixed = function(){
var doc = $(document),
fixed = false,
anchor = $('.anchor'),
content = $('.heading');
var onScroll = function(){
var docTop = doc.scrollTop() +50,
anchorTop = anchor.offset().top;
if(docTop > anchorTop){
if(!fixed){
anchor.height(content.outerHeight());
content.addClass('fixed');
fixed = true;
}
}
else {
if(fixed){
anchor.height(0);
content.removeClass('fixed');
fixed = false;
}
}
};
$(window).on('scroll', onScroll);
};
var demo = new tableFixed($('#sticky_table'));
//button top
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scrollToTop').fadeIn();
} else {
$('#scrollToTop').fadeOut();
}
});
$('#scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
//scroll to element
$('.button_a').click(function(){
$('html, body').animate({
scrollTop: $('#sticky_table').position().top
},300
);
});
});
