Bootstrap Snippet JQuery Add/remove class on scroll pos bootstrap using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
    <div class="sticker">fixed pos until 1000</div>
</div>
<div class="marker">< 1000</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
body {
  font-family: 'Helvetica', sans;
}
div.wrapper {
    margin: 260px auto;
    width:600px;
    background:#efe;
  height: 3900px;
}
div.sticker {
    padding: 20px;
    margin: 20px 0;
    background: #ece;
    width: 190px;
}
.stick {
    position:fixed;
    top:0px;
}
.marker {
  position: absolute;
  top: 1000px;
  right: 100px;
  font-size: 2em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    var s = $(".sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top & windowpos <=1000) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"JQuery Add/remove class on scroll pos bootstrap"
Bootstrap 3.0.0 Snippet by navintukral

Related: See More

Questions / Comments:

"JQuery Add/remove class on scroll pos bootstrap" Bootstrap 3.0.0 Snippet by navintukral

Related: See More

Questions / Comments:

"JQuery Add/remove class on scroll pos bootstrap"
Bootstrap 3.0.0 Snippet by navintukral