bootstrap-affix-faild-first

by deathfang

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>affix</title>
   
	<style>
        *{
            margin: 0;
            padding: 0;
        }

		.container{
			width: 960px;
			height: 2000px;
			background: yellow;
            margin-right: auto;
            margin-left: auto;
		}


		.page-footer{
            height: 180px;
            background: #808080
		}
		.affix{
			position: fixed;
		}
		.bottom_tools {
		    right: 40px;
		    display: none
		}

		.bottom_tools.affix-bottom {
		    position: absolute!important
		}

		.bottom_tools.affix {
		    bottom: 20px
		}

		.bottom_tools * {
			background:#86FF86;
			width: 45px;height: 45px;
		    display: block;
		    margin-top: 5px;
		  }
	</style>
</head>
<body>

    

    <div class="container">

    </div>

	<div class="page-footer"></div>
    
    <div class="bottom_tools">
        <div class="qr_tool">
        </div>
        <a id="scrollUp" href="#" title="飞回顶部">顶</a>
        <a id="feedback" href="" title="意见反馈">意见反馈</a>
    </div>    

    <script src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js">

    </script>
    <script src="http://twbs.github.io/bootstrap/js/affix.js">

    </script>

    <script>
    	+function($){
            var $bottomTools = $('.bottom_tools');

            $(window).scroll(function() {
                $(window).scrollTop() > 100 ? $bottomTools.fadeIn(200) : $bottomTools.fadeOut(200);
            });
            $('#scrollUp').click(function(e) {
                e.preventDefault();
                $('html,body').animate({
                    scrollTop: 0
                });
            })
            $bottomTools
                    .affix({
                        offset: {
                            bottom: $('.page-footer').outerHeight(true) + 20
                        }
                    });

    	}(window.jQuery)
    </script>
</body>
</html>