اموزش کار با پلاگین Scrollspy
با سلام و عرض وقت بخیر برای این ساعت از خانه وردپرس در خدمتتون هستیم با آموزش کار با پلاگین Scrollspy در بوت استرپ. این پلاگین بر اساس موقعیت Scroll به طور خودکار لینک های مربوط به هر بخش را در
یک navigation قرار میده که با کلیک بر روی هریک از ایکون ها ی قرار داده شده شما به بخش مربوط به همون قسمت صفحه منتقل می شید.
مثلا ما این امکان رو در خانه وردپرس قرار دادیم به این صورت که مثلا شما در بخش فروشگاه سایت میتونید با کلیک برو روی گزینه خرید یا کلیک بر روی گزینه نظرات مستقیما به محل نظرات هدایت می شید بدون اینکه احتیاج باشه تامم صفحه ور دستی بلا و پائین کنید.
پس با ما همراه باشید
پلاگین Scrollspy درواقع هر بخش از مکان های مورد نظر شما را در بین دو یک section به صورت زیر قرار می دهد و شما با کلیک بر روی آیکون section انتخابی به قسمت انتخابی هدایت می شوید.
نحوه قرار گیری کد section:
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
شروع کار :
کد های css , جی کوئری :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top: 20px;
z-index: 9999 !important;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
همراهان عزیز دقت فرمائید کد های بالا باید قبل از تگ </head> در فایل مربوط قرار گیرند .
کد های html :
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed vertical sidenav on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
</div>
<br>
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
</body>
</html>
نتیجه کار بصورت زیر می باشد:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top: 20px;
z-index: 9999 !important;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed vertical sidenav on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
</div>
<br>
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
</body>
</html>
امیدوارم از این آموزش لذت کافی را برده باشید.
راستی در کانال تلگرام ما عضو شوید و از مطالب بروز دنیای وردپرس استفاده کنید.پ
این مطلب بصورت اختصاصی برای خانه وردپرس تهیه شده است و کپی برداری بدون ذکر منبع غیر قانونی و حرام می باشدو
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
متشکر از محتوای مفید سایتتون سال خوبی رو براتون آرزومندم