Bootstrap Snippet affix behavior using HTML CSS Bootstrap 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3, from LayoutIt!</title>
    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">
  </head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="carousel slide" id="carousel-773398">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-773398">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-773398">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-773398">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="Carousel Bootstrap First" src="http://www.watersedgechurch.net/wp-content/uploads/2015/01/2015-Camp-banner-1400x400.jpg">
                        <div class="carousel-caption">
                            <h4>
                                First Thumbnail label
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
.footer { background:#f5f5f5; padding:25px 0px;}
/*-----------------------------------------*/
/* affix  */
/*----------------------------------------*/
.affix {width: 33.33333333%; bottom: 0px; width:390px; top:25px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
$('#myAffix').affix({
  offset: {
    top: 350,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"affix behavior"
Bootstrap 3.3.0 Snippet by sachindesigner2016

Related: See More

Questions / Comments:

"affix behavior" Bootstrap 3.3.0 Snippet by sachindesigner2016

Related: See More

Questions / Comments:

"affix behavior"
Bootstrap 3.3.0 Snippet by sachindesigner2016