Фиксированная шапка

29

dadun

4 сентября 2015, 11:59

1065

Добрый день! Пытаюсь освоить css, сделать фиксированную шапку с прокруткой.

Подскажите где ошибка?

HTML


    <script type="text/javascript">

    $(document).ready(function(){

        //фиксированная шапка при скроле

    $("#header").removeClass("default");

    $(window).scroll(function(){

        if ($(this).scrollTop() >10) {

            $("#header").addClass("default").fadeIn('fast');

            } else {

                $("#header").removeClass("default").fadeIn('fast');

            };

        });

    });

    </script>

</head>

<body>

    <header>

        <div id="header" class="top_line">

            <div class="container">

                <div class="row">

                    <div class="col-md-5">

                        <div class="top_addr">

                            <strong>Москва</strong>

                            <a href="#map">д. 16 кор.4</a>                         

                        </div>

                    </div>

                    <div class="col-md-2"></div>

                    <ul class="nav">

                     <li><a href="#home">Главная</a></li>

                     <li><a href="#home">Главная</a></li>

                     <li><a href="#home">Главная</a></li>

                    </ul>

                    <div class="col-md-5"></div>

                </div>

            </div>

            </div>

 

            </header>

            

    <div class="hidden">sdsdsd</div>

    <!-- Mandatory for Responsive Bootstrap Toolkit to operate -->

    <div class="device-xs visible-xs"></div>

    <div class="device-sm visible-sm"></div>

    <div class="device-md visible-md"></div>

    <div class="device-lg visible-lg"></div>

    <!-- end mandatory -->

    <!--[if lt IE 9]>

    <script src="libs/html5shiv/es5-shim.min.js"></script>

    <script src="libs/html5shiv/html5shiv.min.js"></script>

    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>

    <script src="libs/respond/respond.min.js"></script>

    <![endif]-->

    <script src="libs/jquery/jquery-1.11.1.min.js"></script>

    <script src="libs/jquery-mousewheel/jquery.mousewheel.min.js"></script>

    <script src="libs/fancybox/jquery.fancybox.pack.js"></script>

    <script src="libs/waypoints/waypoints-1.6.2.min.js"></script>

    <script src="libs/scrollto/jquery.scrollTo.min.js"></script>

    <script src="libs/owl-carousel/owl.carousel.min.js"></script>

    <script src="libs/countdown/jquery.plugin.js"></script>

    <script src="libs/countdown/jquery.countdown.min.js"></script>

    <script src="libs/countdown/jquery.countdown-ru.js"></script>

    <script src="libs/landing-nav/navigation.js"></script>

    <script src="libs/bootstrap-toolkit/bootstrap-toolkit.min.js"></script>

    <script src="libs/maskedinput/jquery.maskedinput.min.js"></script>

    <script src="libs/equalheight/jquery.equalheight.js"></script>

    <script src="libs/stellar/jquery.stellar.min.js"></script>

    <script src="js/headhesive.min.js"></script>

    <script src="js/common.js"></script>

    <!-- Yandex.Metrika counter --><!-- /Yandex.Metrika counter -->

    <!-- Google Analytics counter --><!-- /Google Analytics counter -->

    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

</body>

</html>

CSS

*::-webkit-input-placeholder {

    color: #666;

    opacity: 1;

}

*:-moz-placeholder {

    color: #666;

    opacity: 1;

}

*::-moz-placeholder {

    color: #666;

    opacity: 1;

}

*:-ms-input-placeholder {

    color: #666;

    opacity: 1;

}

 

body input:focus:required:invalid,

body textarea:focus:required:invalid {

    

}

body input:required:valid,

body textarea:required:valid {

    

}

body {

    font-family: "RobotoRegular", sans-serif;

    font-size: 16px;

    min-width: 320px;

    position: relative;

}

.hidden {

    display: none;

}

.carousel img {

    width: 100%;

    height: auto;

}

.parallax {

    background-attachment: fixed;

    background-position: 50% 0;

    position: relative;

}

header{

  background-image: url(../img/body.jpg);

  background-repeat: repeat-x;

  min-height: 791px;

  background-position: top center;

  position: relative;

  background-repeat: no-repeat;

}

#top_line{

    min-height: 90px;

    -webkit-box-shadow: rgba(255,255,255,.3) 0 0 0 1px;

    box-shadow: rgba(255,255,255,.4) 0 0 0 1px;

    position: absolute;

    top: 10px;

    width: 100%;

    background-color: rgba(255,255,255,.86);

}

 

#header.default{

    position: fixed;

    top: 0;

    background: #fff;

}

 

.top_addr{

    padding-left: 60px;

    background-image: url(../img/home2.png);

    background-repeat: no-repeat;

    background-position: center left;

}

.top_addr strong {

    color: #eeeeee;

    display: block;

    font-weight: normal;

    text-transform: uppercase;

}

.headhesive{

    background: #000;

    position: fixed;

    width: 100%;

    transform: translateY(-50%);

}

 

.headhesive--stick{

    transform: translateY(0);

}

 

.nav{

    float: right;

    padding-top: 5px;

}

.nav li{

    float: left;

    margin-right: 35px;

}

.nav li:last-child{margin-right: 0;}

.nav a{

    text-transform: uppercase;

    font: 14px Arial, sans-serif;

    

}

196

VoV@

4 сентября 2015, 17:37

#1

dadun, вы бы хоть объяснили, что вы имеете ввиду под "фиксированную шапку с прокруткой" и чем это отличается от обычного:

position:fixed;

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!

5

WoWeb

4 сентября 2015, 19:30

#2

в html при скроле сразу убирается class default. Но его у тебя нету. Попробуй

в html вместо

заменить на

таким образом ты добавляешь еще один клас.

А вообще, как сказал VoV@ для фиксированной шапки лучше использовать position:fixed;

Создание SEO оптимизированных сайтов | Продвижение сайтов (http://woweb.com.ua/)

[DLE] Помогу чем смогу Новые теги HTML 5 Что выбрать: class или

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта