Bootstrap Scrollspy-Plugin

Der scrollspy ist ein Navigationsmechanismus, der den scrollbaren Bereich auf einer Webseite überprüft und einen Link aktiviert, um darüber zu informieren, wo sich die Scrollleiste in einer Liste befindet. Es aktualisiert automatisch Ziele in der Navigationsleiste basierend auf der Bildlaufposition. Wenn wir verschiedene Abschnitte einer Seite haben, die große Datenmengen enthalten, können wir Links verwenden, um zu einem bestimmten Abschnitt im scrollbaren Bereich zu springen. Es gibt den Besuchern an, auf welcher Seite sie sich gerade befinden.

Es funktioniert in zwei Richtungen: Zum einen navigiert es zu einem Element und zum anderen zeigt es das angezeigte Element im scrollbaren Bereich der Navigationsliste an. Der Vorteil der Verwendung dieses Plugins besteht darin, dass wir Zeit sparen und Inhalte für die Benutzer leichter zugänglich sind.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Die folgenden Beispiele veranschaulichen die Verwendung verschiedener Techniken zur Implementierung des Scrollspy in Bootstrap. Wenn Sie Fragen dazu haben Bootstrap-Scrollspy-Pluginschreiben Sie es bitte in den Kommentarbereich.

Bootstrap Scrollspy über Datenattribute

Mithilfe von können wir ganz einfach ein Scrollspy-Verhalten für die Navigation erstellen data-spy=“scroll“ in der Zieldivision, in welchem ​​Element aufgespürt werden soll. Wir verwenden das Attribut, Datenziel zum Verknüpfen mit der Navigations-ID, die die ID oder Klasse des übergeordneten Elements innerhalb verwendet .nav Komponente.
Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>ScrollSpy via Data Attributes</h2>
<nav id="navbar-example"   role="navigation">
   <div  >
      <button   type="button" data-toggle="collapse"
         data-target=".bs-js-navbar-scrollspy">
         <span  >Toggle navigation</span>
         <span  ></span>
         <span  ></span>
         <span  ></span>
      </button>
      <a   href="#">Programming Tutorial</a>
   </div>
   <div  >
      <ul  >
         <li><a href="#myval">HTML</a></li>
         <li><a href="#myval1">CSS</a></li>
         <li  >
            <a href="#" id="navbarDrop1"  
               data-toggle="dropdown">JS Frameworks<span  ></span>
            </a>
            <ul  >
               <li><a href="#myval2" tabindex="-1">JavaScript</a></li>
               <li><a href="#myval3" tabindex="-1">JQuery</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
   style="height:200px;overflow:auto; position: relative;">
   <h4 id="myval">HTML</h4>
   <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </p>
   <h4 id="myval1">CSS</h4>
   <p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
   <h4 id="myval2">JavaScript</h4>
   <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </p>
   <h4 id="myval3">JQuery</h4>
   <p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</body>
</html>
  • Beispiel: Führen Sie Bootstrap Scrollspy über Datenattribute aus

Beispiel für Bootstrap Scrollspy über Datenattribute

Bootstrap Scrollspy über JavaScript

Wir können Scrollspy auch manuell aufrufen, indem wir die verwenden scrollspy()Methode. Verwenden Sie die ID oder den Klassenselektor der Navigationsleiste im JavaScript-Code.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function(){
    $("#My-Demo").scrollspy();
});
</script>
</style>
<body>
    <div  >
    <h2>ScrollSpy via JavaScript</h2>
	     <nav id="#My-Demo"   role="navigation">
	    <div  >
	    <button type="button"   data-toggle="collapse"
	       	data-target="#navbarCollapse">
	        <span  >Toggle navigation</span>
	        <span  ></span>
	        <span  ></span>
	        <span  ></span>
	     </button>
	            <a   href="#">Programming Tutorial</a>
	        </div>
	        <div   id="navbarCollapse">
	            <ul  >
	                <li  ><a href="#myval">HTML</a></li>
                    <li><a href="#myval1">CSS</a></li>
	                <li  ><a href="#"  
	                  data-toggle="dropdown">JS Frameworks<span  ></span></a>
			<ul  >
				<li><a href="#myval2" tabindex="-1">JavaScript</a></li>
				<li><a href="#myval3" tabindex="-1">JQuery</a></li>
			</ul>
	                </li>
	            </ul>
	        </div>
	    </nav>
    <div data-spy="scroll" data-target="#My-Demo" data-offset="0"
	   style="height:200px;overflow:auto; position: relative;">
	   <h4 id="myval">HTML</h4>
	   <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
	   </p>
	   <h4 id="myval1">CSS</h4>
	   <p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>

	   <h4 id="myval2">JavaScript</h4>
	   <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
	   	  All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	   </p>
	   <h4 id="myval3">JQuery</h4>
	   <p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.
	   </p>
   </div>
</div>
</body>
</html>
  • Führen Sie Bootstrap Scrollspy über ein JavaScript-Beispiel aus

Bootstrap Scrollspy über JavaScript-Beispiel

Bootstrap Scrollspy-Optionen

Es gibt bestimmte Optionen, an die übergeben wird scrollspy() Methode über Datenattribute oder JavaScript, die die Funktionalität eines Scrollspy anpassen.

Beschreibung des Standardwerts des Optionstyps

versetztNummer10Es bestimmt die Anzahl der Pixel, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen.

Bootstrap Scrollspy-Methoden

Wenn wir Elemente zum DOM hinzufügen oder daraus entfernen möchten, müssen wir die Aktualisierungsmethode aufrufen, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(document).ready(function(){
      removeSection=function(e){
         $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function(){
               var $spy=$(this).scrollspy('refresh')
         });
      }
      $("#my-demo").scrollspy();
   });
</script>
</head>
<body>
<div  >
<h2>ScrollSpy using Methods</h2>
<nav id="my-demo"   role="navigation">
   <div  >
      <button   type="button" data-toggle="collapse"
         data-target=".bs-js-navbar-scrollspy">
         <span  >Toggle navigation</span>
         <span  ></span>
         <span  ></span>
         <span  ></span>
      </button>
      <a   href="#">Programming Tutorial</a>
   </div>
   <div  >
      <ul  >
         <li  ><a href="#myval">HTML</a></li>
         <li><a href="#myval1">CSS</a></li>
         <li  >
            <a href="#"  
               data-toggle="dropdown">JS Frameworks<span  ></span>
            </a>
            <ul  >
               <li><a href="#myval2" tabindex="-1">JavaScript</a></li>
               <li><a href="#myval3" tabindex="-1">JQuery</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#my-demo" data-offset="0"
   style="height:200px;overflow:auto; position: relative;">
   <div  >
   <h4 id="myval">HTML<small><a href="#" onclick="removeSection(this);">
         &times; Remove this section</a></small></h4>
   <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
      HTML documents contain HTML tags and plain textHTML documents are also called web pages.
      HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
      It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
   </p>
   </div>

   <h4 id="myval1">CSS</h4>
   <p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
      Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
   </p>
   <div  >
   <h4 id="myval2">JavaScript<small><a href="#" onclick="removeSection(this);">
         &times; Remove this section</a></small></h4>
   <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
   	  All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
      JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
   </p>
   </div>
   <h4 id="myval3">JQuery</h4>
   <p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
   	  jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
   	  The purpose of jQuery is to make it much easier to use JavaScript on your website.
   </p>
</div>
</body>
</html>
  • Führen Sie Bootstrap Scrollspy mit dem Methodenbeispiel aus

Beispiel für Bootstrap Scrollspy mit Methoden

Bootstrap Scrollspy-Ereignisse

Bootstrap bietet folgende Möglichkeit, die Funktionalität eines Scrollspys anzupassen:

Eventbeschreibung

aktiviere.bs.scrollspyEs wird immer dann ausgelöst, wenn ein Gegenstand mit dem Scrollspy aktiviert wird.

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(document).ready(function(){
      removeSection=function(e){
         $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function(){
               var $spy=$(this).scrollspy('refresh')
         });
      }
      $("#my-demo").scrollspy();
      $("#my-demo").on('activate.bs.scrollspy',function(){
         var currentSection=$(".nav li.active > a").text();
         $("#activeItem").html("You are viewing: "+currentSection);
      })
   });
</script>
</head>
<body>
<div  >
<h2>ScrollSpy using Events</h2>
<nav id="my-demo"   role="navigation">
   <div  >
      <button   type="button" data-toggle="collapse"
         data-target=".bs-js-navbar-scrollspy">
         <span  >Toggle navigation</span>
         <span  ></span>
         <span  ></span>
         <span  ></span>
      </button>
      <a   href="#">Programming Tutorial</a>
   </div>
   <div  >
      <ul  >
         <li  ><a href="#myval">HTML</a></li>
         <li><a href="#myval1">CSS</a></li>
         <li  >
            <a href="#"  
               data-toggle="dropdown">JS Frameworks<span  ></span>
            </a>
            <ul  >
               <li><a href="#myval2" tabindex="-1">JavaScript</a></li>
               <li><a href="#myval3" tabindex="-1">JQuery</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#my-demo" data-offset="0"
   style="height:200px;overflow:auto; position: relative;">
   <div  >
   <h4 id="myval">HTML<small><a href="#" onclick="removeSection(this);">
         &times; Remove this section</a></small></h4>
   <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
      HTML documents contain HTML tags and plain textHTML documents are also called web pages.
      HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
      It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
   </p>
   </div>
   <h4 id="myval1">CSS</h4>
   <p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
      Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
   </p>
   <div  >
   <h4 id="myval2">JavaScript<small><a href="#" onclick="removeSection(this);">
         &times; Remove this section</a></small></h4>
   <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
   	  All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
      JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
   </p>
   </div>
   <h4 id="myval3">JQuery</h4>
   <p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
   	  jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
   	  The purpose of jQuery is to make it much easier to use JavaScript on your website.
   </p>
</div>
<hr>
      <h4 id="activeItem"  ></h4>
</div>
</body>
</html>
  • Führen Sie Bootstrap Scrollspy anhand des Beispiels „Ereignisse“ aus

Bootstrap Scrollspy anhand eines Beispiels für Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen