Sticky navbar имеет глючное поведение

Итак, я попытался настроить навигатор, который установлен прямо под рамкой вокруг страницы. Я сделал иллюстрацию, чтобы помочь объяснить: enter image description here Sticky navbar имеет глючное поведение

На странице, у меня есть границы (синяя) вокруг всей страницы, то Navbar (красный), который прокручивается со страницей, пока он не достигнет верхней части navbar и палочки, пока пользователь не прокрутит резервные копии.

Моя проблема в том, что кажется, что что-то швыряет мой навигатор и его содержимое вправо, когда js пинает (когда пользователь прокручивает верхнюю границу), делая очевидное движение рывка.

enter image description here

Вот мой HTML:

<html> 
    <head> 
     <title>Title</title> 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
     <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
     <%= csrf_meta_tags %> 
    </head> 

    <body> 
     <%= yield :scss %> 

     <div class="container-main <%= layout %>"> 

     <nav class="main-nav"> 
      <a class="navbar-brand" href="#"> 
      <i class="fa fa-bars menu-icon"></i> 
      </a> 
     </nav> 

     <div class="container"> 
      <%= yield %> 
     </div> 

     </div> 

     <%= yield :js %> 

    </body> 
    </html>

ли кто-нибудь знает, как это исправить? Я не уверен, что его загрузочная вещь, которую нужно переопределить или что ... Я попытался установить марку navbar влево, чтобы приравнять движение, но в конечном итоге испортил начальные столбцы, которые я установил. любой совет оценили!

Вот мой CSS:

.main-nav { 
     text-align: center; 
     margin-top: 50px; 
     background: transparent; 
     height: 50px; 
     z-index: 150; 
     margin-bottom: -50px; 
    } 

    .main-nav-scrolled { 
     position: fixed; 
     width: 100%; 
     top: 0; 
    // margin-left: -35px; not working 
    } 

    .main-nav, 
    .container { 
     position: relative; 
    } 
    .container { 
     background: transparent; 
     padding: 100px 
    } 
    .layout-with-border { 
     background: #eaeae8; //fixed for all product pages 
     border: 35px solid #dad4c9; //theme color light 
    } 
    .layout-without-order { 
    }

Вот мой JS:

 var mn = $(".main-nav"); 
      mns = "main-nav-scrolled"; 

     var BorderWidth = 35; 

     $(window).scroll(function() { 
     if($(this).scrollTop() > BorderWidth) { 
      mn.addClass(mns); 
     } else { 
      mn.removeClass(mns); 
     } 
     });

К сожалению, это немного сбивает с толку, как размещать так много деталей, так как я совсем недавно. Я создал помощник для расположения границы:

module ApplicationHelper 
     def layout 
     if params[:controller] == 'products' && params[:action] == 'show' 
      'layout-with-border' 
     elsif params[:controller] == 'volumes' && params[:action] == 'show' 
      'layout-with-border' 
     else 
      'layout-without-border' 
     end 
     end 
    end

источник

2015-04-27 Kumo

Не могли бы вы сделать jsFiddle для этой проблемы? – IvanJ

Попытайтесь добавить позицию: относительно родителя навигатора (main-контейнер) –

Добавить слева: 0; на .main-nav-scrolled, я думаю, он должен решить вашу проблему. – LegendaryAks

Ваш код очень близок к тому, что вам нужно.

Сбой при изменении от position: relative до position: fixed в .main-nav.

Ширины с фиксированными элементами вычисляются относительно окна просмотра, а не родительского контейнера.

Во-первых, обнулить маржу на body (при необходимости, в зависимости от вашего дизайна).

Для иллюстрации, я добавил 35px синюю границу на .main-container.

Затем для .main-nav-scrolled установите левое и правое смещение на 35 пикселей, чтобы установить правильную ширину блока nav, вам не нужно устанавливать значение ширины.

Примечание: Содержание в .container прыгает вверх 50px, когда свиток попадает в точку запуска. Чтобы остановить это, вам нужно будет добавить 50px дополнение к .container-main или верхнему краю 50px до .container, когда вы исправите элемент nav. Я выбрал добавление дополнений, см. Изменения в jQuery ниже.

var mn = $(".container-main"); 
 
mns = "main-nav-scrolled"; 
 

 
var BorderWidth = 35; 
 

 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() > BorderWidth) { 
 
    mn.addClass(mns); 
 
    } else { 
 
    mn.removeClass(mns); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
} 
 
.container-main { 
 
    border: 35px solid lightblue; 
 
} 
 
.main-nav { 
 
    text-align: center; 
 
    margin-top: 0px; 
 
    background: yellow; 
 
    height: 50px; 
 
} 
 
.main-nav-scrolled .main-nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 35px; 
 
    right: 35px; 
 
    z-index: 1; 
 
} 
 
.main-nav-scrolled.container-main { 
 
    padding-top: 50px; 
 
} 
 
.container { 
 
    position: relative; 
 
    background: beige; 
 
    padding: 100px; 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-main"> 
 
    <nav class="main-nav"> 
 
    <a class="navbar-brand" href="#"> 
 
     <i class="fa fa-bars menu-icon">Icon</i> 
 
    </a> 
 
    </nav> 
 
    <div class="container">container content...</div> 
 
</div>

источник

2015-04-27 14:37:11

определяет max-width: к вашему самому навигационному элементу или родительской оболочке.

У вас должна быть обертка div вокруг середины страницы за пределами обертки полной ширины - что я вижу. Например, что-то вроде ниже.

#middle_page_wrap { 
    width: 960px; 
    max-width: 960px; 
    margin: 0 auto; 
    position: relative; 
}

И как:

<div class="container-main"> 
<div id="middle_page_wrap"><!-- nest --> 
<nav class="main-nav"> 
      <a class="navbar-brand" href="#"> 
      <i class="fa fa-bars menu-icon"></i> 
      </a> 
    </nav> 
<!-- etc -->

Кроме того, да, я согласен с замечаниями; не знаете, что здесь играет JS или динамический инструмент или другие языки. Нозвучит как чистый CSS вещь

Если это не работает, то его из кода вы не показываете, что вам придется создать демо/jsfiddle.

источник

2015-04-27 14:17:16

Sticky navbar имеет глючное поведение

ответ

Смежные вопросы