Bootstrap Snippet Bootstrap sticky bottom and Affix navbar onScroll with Viewport Responsive image using HTML CSS Bootstrap jQuery

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 ---------->
<div id="page-top" name="page-top" class="active" data-spy="scroll" data-target=".navbar-static-top"></div>
<div class="slideout-menu" id="slideout-menu">
            <h3 class="slideout-menu">Menu <a href="#" class="slideout-menu-toggle">×</a></h3>
            <ul class="slideout-menu-list">
                <li class="active"><a href="#page-top"><strong>Page Top </strong></a></li>
                <li><a href="#posts">Posts</a></li>
                <li><a href="#section3">About</a></li>
                <li><a href="#section4">News</a></li>                           
                <li><a href="#section5">Contact</a></li>
                <li><a href="#footer">Page Bottom</a></li>
            </ul>
        </div><!--/.slideout-menu-->
        <div class="main">
            <header class="masthead">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12 title-block">
                            <h1 class="title"><a href="#" title="Bootstrap Binding Sticky Navigation and Viewport Sizes Images Template"><span class="text-danger"><b>Bootstrap </b></span>·Binding·<span class="text-danger"><b>Sticky·</b></span>Navigation···&·<span class="text-danger">Viewport·</b></span>Sizing</a><br>
                            <small>An image <span class="text-danger"><b>That</b></span>Covers the <span class="text-danger"><b>Viewport</b></small></h1>
                        </div>
                        <div class="col-sm-6">
                            <div class="pull-right hidden-xs"> 
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- Fixed navbar -->
            <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav" name="nav">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
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
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
    -webkit-font-smoothing: antialiased;
    font: normal 14px arial,sans-serif;
}
html {
    position: relative;
}
body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#efefef;
}
article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav {
    display: block;
}
.main{
    position:static;/* Don't Change - Positioning */
    top:0;
    left:0;
    min-height: 100%;
    height: auto !important;
    margin-bottom:4%;
}
header{
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 Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright Ã‚Â© 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright Ã‚Â© 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap sticky bottom and Affix navbar onScroll with Viewport Responsive image"
Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Bootstrap sticky bottom and Affix navbar onScroll with Viewport Responsive image" Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Bootstrap sticky bottom and Affix navbar onScroll with Viewport Responsive image"
Bootstrap 3.3.0 Snippet by blayderunner123