Animieren/Verkleinern der NavBar auf Blättern mit Bootstrap 4

Ich gesucht habe einen ganzen Haufen für diese, aber kann nicht scheinen zu finden, eine funktionierende Lösung. Im Grunde habe ich meine NavBar perfekt, wie ich es will. Will ich jetzt verkleinern der NavBar, wenn meine Seite scrollt runter zu machen, mehr schlank mit einem schönen glatten übergang (animation).

Dies ist mein HTML-markup für meine aktuelle NavBar:

<header>


      <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website Branding"></a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Portfolio</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Blog</a>
                  </li>
              </ul>
          </div>
      </nav>


    </header>

Irgendwelche Ideen, wie ich diese erreichen können? Ich habe eine Menge gesucht, aber die meisten Lösungen waren für Bootstrap 3.

Cheers

InformationsquelleAutor user3599852 | 2017-02-14
  1. 12

    Aktualisiert 2018

    Meisten schrumpfen auf Blättern Navbar-Implementierungen für Bootstrap-3.x werden mit dem Anbringen der Komponente zu ändern, den Stil der Navigationsleiste in einer bestimmten scroll-position.

    Jedoch, Bringt fallen gelassen wurde von Bootstrap 4..

    "Fiel das Affix jQuery-plugin. Wir empfehlen die Verwendung von position: sticky
    polyfill statt. Finden Sie in der HTML5-Bitte Eintritt für details und spezifische
    polyfill Empfehlungen."

    Erstellen eine ähnliche Navbar-Effekt in der Bootstrap-4, können Sie position: sticky (nicht unterstützt in allen Browsern), indem Sie den sticky-top Klasse der Navbar. Dies funktioniert auf "stick" die Navbar, wenn es die Spitze erreicht, aber nicht ein Ereignis ausgelöst, um anzugeben, Wann der es ist "stecken". Daher, JS wird benötigt zum ändern der Navbar-Stil, wenn es "stecken".

    Eine JS-Methode unterstützt in modernen Browsern ist IntersectionObserver. Verwenden Sie es, zu "sehen", wenn eine hidden-trigger-element über die Navigationsleiste erreicht den viewport (wenn stuck angewendet wird, um die html element).

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

    Sticky-Top Navbar - IntersectionObserver Demo

    Du könntest auch jQuery-plugin, wie ScrollPos-Styler, oder schreiben Sie Ihre eigenen jQuery für die Steuerung der Navigations-Stile, auf Blättern...

    , Wie es funktioniert:

    Feste-top-Navbar mit 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 zu beobachten, scroll-position und bedingt wechseln die .affix Klasse:

    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 zu manipulieren, das affix-Stil (Polsterung/Höhe, Farbe, etc..):

    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);
}

    Hinweis: Bootstrap 4.0.0, die Navigationsleiste leicht verändert hat, wie navbar-toggleable-* hat die änderung navbar-expand-

    Sticky-Top Navbar - jQuery Demo

    Schließlich, Sie können mit einem einfachen jQuery - $(window).scroll () - Funktion, wenn Sie wissen, die genaue position, wenn die Navigationsleiste muss stick...

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

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

    Mehr Bootstrap 4 ändern der Navbar-Stil auf Blättern Beispiele:

    einfach klebrig nach scrollen (4.0.0)

    schrumpfen Höhe (4.0.0)

    schrumpfen Höhe (alpha-6)

    transparent über den hintergrund

    ändern Sie die Farbe nach scrollen

    ändern der navbar bg Farbe mit scrollspy Abschnitte

    Fragen:

    Festsetzung der Navigationsleiste oben auf den Blättern

    Kleben funktioniert nicht in der Bootstrap-4 (alpha)

    • Erwähnen Sie den erforderlichen code bitte.
    InformationsquelleAutor Zim
  2. 5

    JS:

     $(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

    CSS:

    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;
}

    HTML:

    <!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>

    Diesen code verwenden.Es ist einfach und leicht. Ich hoffe, Sie bekommen ein Verständnis. Ich habe eine Klasse schrumpfen, das es zu der Navigationsleiste, sobald es überquert 50 Pixel. Und der rest ist css, die ich vorgetragen habe, in der Schrumpfen-Klasse.

    InformationsquelleAutor
  3. 0

    Beide der oben genannten Antworten, die mir lange und kompliziert, sicher (dachte ich), muss es einen wirklich eleganten Weg dies zu tun jetzt in der Bootstrap-4.1 - es ist 2018!
    Nun ja - nee....Es gibt einige interessante Antworten rund um die net, wenn Sie einen Blick auf einige der Vorlagen, die bei startbootstrap.com zum Beispiel.

    Ich konnte nichts sehen, erheblich Verschieden von derjenigen, über...

    Hinzufügen oder entfernen einer Klasse auf Blättern/Seite laden...

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

    Dann Stil aus, die angehängt Klasse...

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

    #mainNav.navbar-shrink {
      background-color: pink;
    }
    InformationsquelleAutor zak
Schreibe einen Kommentar