Bootstrap Snippet scroll event jquery using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
  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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
                }
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"scroll event jquery"
Bootstrap 4.1.1 Snippet by ranjit1602

Related: See More

Questions / Comments:

"scroll event jquery" Bootstrap 4.1.1 Snippet by ranjit1602

Related: See More

Questions / Comments:

"scroll event jquery"
Bootstrap 4.1.1 Snippet by ranjit1602