0

Имеется "бутстраповский" navbar, сделан прозрачным, так как изначально расположен на тёмном фоне, при "скроллинге" страницы попадается белый фон, соответственно всё выглядит плохо, буквы наезжают друг на друга и прочие эффекты. То есть, нужно, чтобы при прокрутке "навбар" поменял свой "бэкграунд" на белый.

Образцы желаемого:

Раз Два

Ну, или нужен пример как такое реализовать. Спасибо.

6
  • Раз, два - page not found
    – SVE
    31 авг 2016 в 11:54
  • пример
    – Ruslan_K
    31 авг 2016 в 11:56
  • Сорри themebootstrap.net/primes-v1.5.3/template-09/index.html
    – Marik
    31 авг 2016 в 11:57
  • Спасибо за пример, посмотрю.
    – Marik
    31 авг 2016 в 11:59
  • С текстом только напряг, несколько параметров в скрипте реально выставить?
    – Marik
    31 авг 2016 в 13:53

1 ответ 1

2

Например так:

$(document).ready(function() {
  var $header = $(".navbar");

  $(window).scroll(function() {
		if ($(this).scrollTop() > 1){
			$header.addClass("navbar-inverse");
		}
		else{
			$header.removeClass("navbar-inverse");
		}
	});
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
  
  <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>
  
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint voluptatem minima, tempore quis! Molestiae reiciendis alias sed laboriosam similique! Eum consectetur, asperiores itaque alias laboriosam perferendis dolores, inventore sint? Ipsam, tempora, assumenda! Nam, accusantium dolore quod nemo ipsum! Architecto esse inventore sint minima aspernatur sunt voluptas. Rerum asperiores dolores nostrum.
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nihil ab eaque ducimus, facilis eveniet asperiores perspiciatis laudantium impedit animi dolorum nisi officia ratione molestias hic non vitae, atque praesentium ipsum natus? Suscipit repellat incidunt iste ipsam illum provident nam rerum neque consequatur ut eum repudiandae obcaecati possimus, beatae. A aliquid, corporis ad natus nulla odio accusantium nemo dignissimos consequatur similique culpa, adipisci hic. Eius, expedita laborum! Rerum reiciendis eos asperiores libero consequuntur eum, ipsa ad perferendis quisquam. Enim aperiam nam ipsa quod sapiente, recusandae quaerat, ex molestiae dolor omnis error nemo commodi ipsam repellendus iusto aliquam itaque, laudantium eaque.
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>

2
  • Спасибо, бум сравнивать.
    – Marik
    31 авг 2016 в 14:07
  • По первому варианту не плохо, но есть пара моментов, пришлось много чего в скрипт копировать из вёрстки, и соответственно не срабатывают некоторые вещи, например при скроллинге и возврате назад, не применяются некоторые параметры, например: $('.navbar-default').css('background', '0, 0, 0, 0.8');
    – Marik
    31 авг 2016 в 17:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.