affix

by iameuanmackay

HTML

<script src="http://www.megmackayphoto.com/Beta/lib/js/filter.js"></script>
<script src="http://www.megmackayphoto.com/Beta/dist/js/bootstrap.min.js"></script>
<div id="wrap">
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                     <h1>logo</h1>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                        </button> <a class="navbar-brand active" href="index.html">home</a>

                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="portfolio.html">portfolio</a>
                            </li>
                            <li><a href="blog.html">blog</a>
                            </li>
                            <li><a href="contact.html">contact</a>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!-- rheader -->
            </div>
            <!--end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
    <!-- Begin page content -->
    <div class="container-fluid">
        <div id="portfolio">
            <div class="row">
                <div...

CSS

#portfolio {
    padding-top: 0px;
    margin-left: 50px;
}
#mob-filter {
    padding-left: 25px;
    padding-top: 20px;
}
ul#filter {
    float: right;
    font-size: 14px;
    list-style: none;
    margin-left: -0;
    width: 100%;
}
ul#filter li {
    border-right: 0px solid #dedede;
    border-left: 0px solid #dedede;
    float: left;
    line-height: 8px;
    padding-right: 10px;
}
ul#filter li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
ul#filter a {
    color: #999;
    text-decoration: none;
}
ul#filter li.current a, ul#filter a:hover {
    text-decoration: underline;
}
ul#filter li.current a {
    color: #999;
    font-weight: bold;
}
ul#portfolio {
    max-width: 100%;
    list-style: none;
    margin-left: 0;
    padding-left:;
}
ul#portfolio li {
    border: 0px solid #dedede;
    float: left;
    padding-right: 5px;
    padding-top: 5px;
    width: auto;
}
ul#portfolio a {
    display: block;
    width: 100%;
}
ul#portfolio a:hover {
    text-decoration: none;
}
ul#portfolio img {
    border: 2px none #dedede;
    display: block;
}
#thumbs {
    padding-top: 20px;
}
}
<!--[if lt IE 7]> <link href="stylesheets/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" /> <![endif]-->

JavaScript

$(document).ready(function () {
    var url = window.location.href;
    var anchor = url.substring(url.indexOf("#"));
    var tag;

    if (anchor.indexOf('#') > -1) {
        tag = anchor.substring(1);

    }

    if (tag) {
        if (tag == 'all') {
            $('ul#portfolio li.hidden').show();
        } else {

            $('ul#portfolio li').each(function () {
                if (!$(this).hasClass(tag)) {
                    $(this).hide().addClass('hidden');
                } else {
                    $(this).show().removeClass('hidden');
                }
            });
        }
    } else {
        $('ul#portfolio li').show();
    }

    $('ul#filter a').click(function () {
        $(this).css('outline', 'none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ', '-');

        if (filterVal == 'all') {
            $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
        } else {

            $('ul#portfolio li').each(function () {
                if (!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});