Вопросы Теги

Bootstrap 4 - изменение Navbar после прокрутки [дубликат]

Наряду с попыткой всего, что предлагает Teo Chuen Wei Bryan, убедитесь, что вы также ссылаетесь на правильное имя Server / Instance в строке подключения.

Если вы используете краткую форму имени хоста / экземпляра на сервере базы данных или в файле web.config, убедитесь, что вы используете полное доменное имя (FQDN) / экземпляр

Кроме того, чтобы проверить подключение с сервера, на котором нет клиента SQL-сервера,

-> создать текстовый файл и изменить его расширение файла на .udl

-> Щелкните правой кнопкой мыши файл, и вы увидите вкладку подключения.

-> Введите имя сервера и зарегистрируйте информацию для проверки соединения с сервером базы данных.

Надеюсь, это поможет.

1
задан Themes.guide 15 February 2017 в 14:09
поделиться

3 ответа

Обновлено 2018

Большая часть сокращения для прокрутки реализации Navbar для 3.x выполняется с использованием компонента Affix для изменения стиля навигационной панели в определенной позиции прокрутки.

Тем не менее, Affix был сброшен из Bootstrap 4 ..

"Выпало плагин Affix jQuery. Мы рекомендуем использовать позицию: липкий полиспол См. HTML5. Пожалуйста, введите подробную информацию и конкретные рекомендации по полированию. "

Чтобы создать аналогичный эффект Navbar в Bootstrap 4, вы можете использовать position: sticky (не поддерживается во всех браузерах) добавив класс sticky-top в Navbar. Это работает с « stick » на Navbar, когда он достигает вершины, но не не запускает событие, указывающее, когда оно « застряло », , Поэтому JS необходимо изменить стиль Navbar, когда он « застрял ».

Один JS-метод, поддерживаемый в современных браузерах, - IntersectionObserver. Используйте его, чтобы «смотреть», когда скрытый элемент триггера над Navbar достигает области просмотра (когда stuck применяется к элементу html). 

.stuck .sticky-top {
    background-color: #222;
    padding-top: 3px;
    padding-bottom: 3px;
}

Sticky Top Navbar - IntersectionObserver Demo

Вы также можете использовать плагин jQuery, такой как ScrollPos-Styler , или написать свой собственный jQuery для управления стилями навигации в прокрутке ...

Как это работает:

Navbar с фиксированным верхом с data-toggle="affix": 

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix">
      <a href="#" class="navbar-brand">Brand</a>
      <a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</a>
      <ul class="nav navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">..</a>
          </li>
      </ul>
</div>

jQuery, чтобы смотреть положение прокрутки и условно переключать класс .affix: 

var toggleAffix = function(affixElement, scrollElement, wrapper) {
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
};

/* use toggleAffix on any data-toggle="affix" elements */
$('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });

    // init
    toggleAffix(ele, $(window), wrapper);
});

CSS для управления стилем аффикса (добавление / высота, цвет и т. д.): 

html,body {
    height:100%;
    padding-top:56px; /*height of fixed navbar*/
}

.navbar { 
  -webkit-transition:padding 0.2s ease;
  -moz-transition:padding 0.2s ease; 
  -o-transition:padding 0.2s ease;        
  transition:padding 0.2s ease;  
}

.affix {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  -webkit-transition:padding 0.2s linear;
  -moz-transition:padding 0.2s linear;  
  -o-transition:padding 0.2s linear;         
  transition:padding 0.2s linear;  
}

section {
    min-height:calc(100% - 70px);
}

Примечание: Начиная с Bootstrap 4.0.0, Navbar немного изменился, так как navbar-toggleable-* изменился на navbar-expand-

Sticky Top Navbar - jQuery Demo

Наконец, вы можете использовать простая функция jQuery $ (window) .scroll (), если вы знаете точное положение, когда Navbar необходимо придерживаться ... 

$(window).scroll(function() {
  /* affix after scrolling 100px */
  if ($(document).scrollTop() > 100) {
    $('.navbar').addClass('affix');
  } else {
    $('.navbar').removeClass('affix');
  }
});

https://www.codeply.com / go / 62Roy6RDOa

Подробнее Bootstrap 4 chan ge Navbar style на примерах прокрутки: просто липкий после прокрутки (4.0.0) высота усадки (4.0.0) высота усадки (альфа-6 ) прозрачный над фоном изменить цвет после прокрутки

Связанные вопросы: Фиксация навигационной панели сверху на прокрутке Аффикс не работает в Bootstrap 4 alpha

6
ответ дан Themes.guide 17 August 2018 в 14:14
поделиться 

 $(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
nav.navbar.shrink {
    width: 100%;
    height: 35px;
    background-color: #111;
    box-shadow: 0 1px 0 0 #dadada;
    position: fixed;
    left: 0px;
    transition: all 1.5s ease;

}
nav.navbar.shrink .navbar-brand  img{
  height: 50px;
  width: 120px;
  transition: all 1.5s ease;
}
nav.navbar.shrink a {
  font-size: 14px;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
  transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-toggler {
  margin: 8px 15px 8px 0;
  padding: 4px 5px;
  transition: all 1.5s ease;
}

.header{

	
	height:100px;
}

.navbar-brand{

	padding-left:30px;
	padding-top:30px;
	padding-bottom:30px;

}

.collapse{

	padding-right:30px;
}

.logo{


	width: 170px;
	height: 58px;
}


.hero-container p{
  color:black;
  text-align: center;
  height:auto;
}

.image-container{
	text-align:center;
}

.banner{

	background-image: url(../images/banner.jpg); 
	background-repeat: no-repeat;
	padding-top: 70px;
	padding-left: 30px;
	padding-right:30px;
	padding-bottom: 78px;
	width:100%;
	height:auto;
 }

.banner .row h4,p{

   color: white;
}

.client{

	height: 635px;
	margin-top:74px;
	padding-right:10px;
	padding-left:10px;
}

.btn-primary{

	
	background: transparent;
	width:170px;
	border: 1px solid white;
	color:white;
}


form{
    padding-top:56px;
    padding-bottom:56px;
	padding-left: 30px;
    height:auto;
	}

form,h2,label{
	color:white;
}

.above{
	margin-bottom:34px;
	width:100%;
	height:auto;
	padding-right: 30px;
}

.below{

	width:100%;
	height:auto;
    padding-right: 30px;

}

.heading{
	color: black;
	margin-top: 62px;
}

.lead{
color:black;
}

.form_banner{
    
	background-image: url(../images/form_banner.jpg);
	background-repeat: no-repeat;
	
    width: 100%;
    
}

.contact{
	background-image: url(../images/contact.png);
	background-repeat: no-repeat;
	margin-bottom: 40px;
	margin-top:50px;
	height:auto;
	width:100%;
	padding-left: 313px;
	padding-right:313px;
	padding-top: 64px;
	padding-bottom:64px;
	text-align: center;
}

.contact, h5{

	color:white;
}

hr{
	display: block;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

.footer_img{

	padding-left: 30px;
	width:170px;
	height:63px;
}

.footer{
	margin-bottom: 41px;
}
<!doctype HTML>
<html lang="en">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">

  
  
</head>

<body>

<div class="container-fluid">

<div class="header container">
<div class="row">
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
      <a class="navbar-brand" href="#">HeRo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Company<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Capabilities</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Customers</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="#">Innovation</a>
          </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
         
         
        </ul>
        
      </div>
    </nav>
</div>
</div>
</div>
    
<div class="hero-container container">
<div class="row">
  <div class="col">
    
    <p>Commerce</p>
    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>

  <div class="col">
  
            <p>Interactive</p>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p></div>
    <div class="col">
    

            <p>Analytics</p>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p></div>
    <div class="col">
    
            <p>Integration</p>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p></div>
    <div class="col">
    
            <p>Cloud & Management Services</p>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p></div>
</div>
</div>
    
<div class="banner container-fluid">
    <div class="row">
        <h4>Dedicated, Experience, Innovative</h4>
        <p>For over a decade our experienced team has been delivering Digital Commerce solutions that change the way consumers research, interact and purchase. As mobility and pervasive connectivity continue to transform buying habits, we are focused on helping businesses discover and maximise new opportunities – be it direct to consumers, via resellers, or by other innovative models.</p>

          <p>Our expertise is centred on the Digital Commerce solution that excels in delivering best-in-class Scalability and User Experience. From our global headquarters in India, we have expanded to empower Clients across four continents, with offices located in Singapore, USA, Australia and the UK.</p>
        <h4>BUSINESS</h4>
        <p>Our approach is to listen to you as the experts in your market. We look to complement your insight with a project team capable of understanding your business and delivering better digital experience. Our in-country Advisors will help assess your requirements and collaboratively design a service that meets your strategic goals.</p>

        <h4>TECHNOLOGY</h4>
        <p>With a specialised team of Creative Designers, Developers, Engineers and Architects we have substantial experience across many leading enterprise and open source platforms. Beyond our core expertise in Digital Commerce, we also offer Mobility, Integration, Digital Analytics, Development and other custom Web and applications development services.</p>
    </div>
</div>



 <!-- FOOTER -->
<div class="footer container">
     
  <div class="clearfix">
    <span class="float-left"><a href="#"><img class="footer_img" src="images/ibm_logo.png"></a></span>
    <span class="float-right">&copy; AbcXyZ Inc and Affiliates.All Rights Reserved</span>
 </div>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


  
</body>
</html>

Используйте этот код. Это просто и просто. Надеюсь, вы поймете. Я сделал класс shrink, который он добавит к navbar, когда он пересечет 50 пикселей. И отдых - это все css, которое я ввел в класс Shrink.

2
ответ дан user 17 August 2018 в 14:14
поделиться

Оба вышеупомянутых ответа выглядели длинными и сложными, конечно (я думал), должен быть действительно гладкий способ сделать это сейчас в Bootstrap 4.1 - это 2018 год! Хорошо yeh - nah .... Есть несколько интересных ответов по сети, если вы посмотрите на некоторые из шаблонов в startbootstrap.com , например.

Я didn «Посмотрите что-нибудь значительно отличное от тех, что были выше ...

Добавить или удалить класс при загрузке прокрутки / страницы ... 

    var o = function() {
      var mn = $("#mainNav");
      mn.offset().top > 100 ? mn.addClass("navbar-shrink") : mn.removeClass("navbar-shrink");
    };
    o(), $(window).scroll(o);

Затем стиль основан на этом добавленном классе. .. 

 #mainNav {
       background-color: #0f6f56;
       transition: all 1s ease;
    }

    #mainNav.navbar-shrink {
      background-color: pink;
    }
0
ответ дан zak 17 August 2018 в 14:14
поделиться