Форум

DmitriSpartak · #1 (**permalink**) 22.05.2015, 01:40

Прочитал множество подобных вопросов на форуме, но ничего не помогает.

На сайте под внушительным хедером, будет находиться небольшое полоса с телефоном и кнопкой заказать, при прокрутке хедера до этой полоски, полоска должна прилипать к верху страницы, и в дальнейшем при прокрутке так и оставаться наверху. Если пользователь поднимется вверх до хедера, то полоса прилипает на прежнее место.

Помогите пожалуйста, вот код:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Fixed</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
        <script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
        <script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
 
        var wrap = $("#nav");
 
        wrap.on("scroll", function(e) {
 
          if (this.scrollTop > 500) {
            wrap.addClass("sticky");
          } else {
            wrap.removeClass("sticky");
          }
 
        });
 
</script>
 
<style>
*
{
    margin: 0;
    padding: 0;
    border: 0;
}
body
{
    font-size: 25px;
    color: #fff;
    font-family: 'Microsoft Sans Serif';
}
#header
{
    height: 1000px;
    background-color: gray;
}
#nav
{
    height: 40px;
    background-color: red;
    text-align: center;
    
    
}
#text
{
    background-color: #CCC;
    height: 2000px;
}
.sticky
{
    position: fixed;
    width: 100%;
    top: 0;
}
 
</style>
 
    </head>
    <body>
        <div id="wrapper">
            <header>
                <div id="header">
                </div>
            </header>
            <nav>
                <div id="nav">
                    <div id="logo_nav"></div>
                    <div id="tel_nav"><p>Телефон</p></div>
                </div>
            </nav>
            <div id="text">
            </div>
        </div>
    </body>
</html>

Decode · #2 (**permalink**) 22.05.2015, 02:09

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }

    body {
      font-size: 25px;
      color: #fff;
      font-family: 'Microsoft Sans Serif';
    }

    #header {
      height: 1000px;
      background-color: gray;
    }

    #nav {
      height: 40px;
      background-color: red;
      text-align: center;


    }

    #text {
      background-color: #CCC;
      height: 2000px;
    }

    .sticky {
      position: fixed;
      width: 100%;
      top: 0;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <header>
      <div id="header">
      </div>
    </header>
    <nav>
      <div id="nav">
        <div id="logo_nav"></div>
        <div id="tel_nav"><p>Телефон</p></div>
      </div>
    </nav>
    <div id="text">
    </div>
  </div>
  <script>
    var nav = $("#nav"),
        header = $('header').height();

    $(window).scroll(function() {
      if( $(this).scrollTop() > header ) {
        nav.addClass('sticky');
      } else {
        nav.removeClass('sticky');
      }
    });
  </script>
</body>
</html>

DmitriSpartak · #3 (**permalink**) 22.05.2015, 13:39

Decode,
Спасибо, ваш вариант работает.
Но там у меня в шапке библиотеки подключаются (они прописаны у меня в стартовом сообщении), вот с ними не работает. Они мне нужны для слайдера на странице.
Подскажите, можно ли как то исправить конфликт? Или просто искать другой вариант слайдера?
Вот ссылка на слайдер:
http://ajaxs.ru/lesson/jq/14-krasivy...ja_teksta.html

DmitriSpartak · #4 (**permalink**) 22.05.2015, 13:46

А нет, все разобрался, спасибо огромное!

Форум

Справочник

Discord чат

Курсы javascript