{"id":3588,"date":"2019-02-07T22:01:09","date_gmt":"2019-02-07T16:31:09","guid":{"rendered":"https:\/\/blog.pheonixsolutions.com\/?p=3588"},"modified":"2019-02-07T22:42:37","modified_gmt":"2019-02-07T17:12:37","slug":"bootstrap-4-scrollspy","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","title":{"rendered":"Bootstrap 4 scrollspy"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Bootstrap 4 Scrollspy<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Date posted : 07\/02\/2019<\/h4>\n\n\n\n<p>Scrollspy is used to automatically update links in a navigation list based on&nbsp;<strong>scroll<\/strong>&nbsp;position.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h3 class=\"wp-block-heading\">How To Create a Scrollspy<\/h3>\n\n\n\n<p>The following example shows how to create a scrollspy:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scrollspy Using Bootstrap 4<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;title&gt;Bootstrap Example&lt;\/title&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/css\/bootstrap.min.css\"&gt;\n  <a href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\">https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js<\/a>\n  <a href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js<\/a>\n  <a href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js\">https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js<\/a>\n  &lt;style&gt;\n  body {\n      position: relative; \n  }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body data-spy=\"scroll\" data-target=\".navbar\" data-offset=\"50\"&gt;\n\n&lt;nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-top\"&gt;  \n  &lt;ul class=\"navbar-nav\"&gt;\n    &lt;li class=\"nav-item\"&gt;\n      &lt;a class=\"nav-link\" href=\"#section1\"&gt;Section 1&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item\"&gt;\n      &lt;a class=\"nav-link\" href=\"#section2\"&gt;Section 2&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item\"&gt;\n      &lt;a class=\"nav-link\" href=\"#section3\"&gt;Section 3&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item dropdown\"&gt;\n      &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbardrop\" data-toggle=\"dropdown\"&gt;\n        Section 4\n      &lt;\/a&gt;\n      <div class=\"dropdown-menu\">\n        <a class=\"dropdown-item\" href=\"#section41\">Link 1<\/a>\n        <a class=\"dropdown-item\" href=\"#section42\">Link 2<\/a>\n      <\/div>\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n<div id=\"section1\" class=\"container-fluid bg-success\" style=\"padding-top:70px;padding-bottom:70px\">\n  <h1>Section 1<\/h1>\n  <p>NEVER EVER GIVE UP <\/p>\n  <p>SURVIVAL $$$$$$$$<\/p>\n<\/div>\n<div id=\"section2\" class=\"container-fluid bg-warning\" style=\"padding-top:70px;padding-bottom:70px\">\n  <h1>Section 2<\/h1>\n  <p>NATURE IS MOTHER OF GOD(())<\/p>\n  <p> TRUE FRIENSHIP MAKES HAPPIER ^^^^^^^^^^2<\/p>\n<\/div>\n<div id=\"section3\" class=\"container-fluid bg-secondary\" style=\"padding-top:70px;padding-bottom:70px\">\n  <h1>Section 3<\/h1>\n  <p>TRUE LOVE %%%%%%%%%%%%<\/p>\n  <p>CREATIVITY ***************<\/p>\n<\/div>\n<div id=\"section41\" class=\"container-fluid bg-danger\" style=\"padding-top:70px;padding-bottom:70px\">\n  <h1>Section 4 Submenu 1<\/h1>\n  <p>HURRAY$$$$$$$$$$$<\/p>\n  <p>HAVE FUN ################<\/p>\n<\/div>\n<div id=\"section42\" class=\"container-fluid bg-info\" style=\"padding-top:70px;padding-bottom:70px\">\n  <h1>Section 4 Submenu 2<\/h1>\n  <p>HELLO !!!!!!<\/p>\n  <p>SUCCESS !!!!!!!!!!!!!!!!!<\/p>\n<\/div>\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example Explained<\/h3>\n\n\n\n<p>Add&nbsp;<code>data-spy=\"scroll\"<\/code>&nbsp;to the element that should be used as the scrollable area (often this is the&nbsp;<code>&lt;body&gt;<\/code>&nbsp;element).<\/p>\n\n\n\n<p>Then add the&nbsp;<code>data-target<\/code>&nbsp;attribute with a value of the id or the class name of the navigation bar (<code>.navbar<\/code>). This is to make sure that the navbar is connected with the scrollable area.<\/p>\n\n\n\n<p>The optional&nbsp;<code>data-offset<\/code>&nbsp;attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.<\/p>\n\n\n\n<p><strong>Note : Requires relative positioning:&nbsp;<\/strong>The element with data-spy=&#8221;scroll&#8221; requires the CSS&nbsp;<strong>position<\/strong>&nbsp;property, with a value of &#8220;relative&#8221; to work properly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">End output and results<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"124\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\" alt=\"\" class=\"wp-image-3590\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-300x36.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-768x93.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM.png 1966w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>SECTION 1<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"175\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.48-PM-1024x175.png\" alt=\"\" class=\"wp-image-3591\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.48-PM-1024x175.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.48-PM-300x51.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.48-PM-768x131.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.48-PM.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>SECTION 2<br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.25.38-PM-1024x136.png\" alt=\"\" class=\"wp-image-3592\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.25.38-PM-1024x136.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.25.38-PM-300x40.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.25.38-PM-768x102.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.25.38-PM.png 1852w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Thanks for using  pheonix solutions.<\/p>\n\n\n\n<p>Share it with your friends if you find this article is helpful.Thanks a lot.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap 4 Scrollspy Date posted : 07\/02\/2019 Scrollspy is used to automatically update links in a navigation list based on&nbsp;scroll&nbsp;position. How To Create a Scrollspy The following example shows how to create a scrollspy: Scrollspy Using Bootstrap 4 Example Explained Add&nbsp;data-spy=&#8221;scroll&#8221;&nbsp;to the element that should be used as the scrollable&hellip; <a href=\"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/\" class=\"more-link read-more\" rel=\"bookmark\">Continue Reading <span class=\"screen-reader-text\">Bootstrap 4 scrollspy<\/span><i class=\"fa fa-arrow-right\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[513,484,1],"tags":[479,555],"class_list":{"0":"post-3588","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-bootstrap","7":"category-html-css","8":"category-uncategorized","9":"tag-bootstrap-4","10":"tag-scrollspy","11":"h-entry","13":"h-as-article"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Bootstrap 4 Scrollspy Date posted : 07\/02\/2019 Scrollspy is used to automatically update links in a navigation list based on&nbsp;scroll&nbsp;position. How To Create a Scrollspy The following example shows how to create a scrollspy: Scrollspy Using Bootstrap 4 Example Explained Add&nbsp;data-spy=&quot;scroll&quot;&nbsp;to the element that should be used as the scrollable&hellip; Continue Reading Bootstrap 4 scrollspy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-07T16:31:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-07T17:12:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\"},\"headline\":\"Bootstrap 4 scrollspy\",\"datePublished\":\"2019-02-07T16:31:09+00:00\",\"dateModified\":\"2019-02-07T17:12:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/\"},\"wordCount\":198,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\",\"keywords\":[\"bootstrap 4\",\"scrollspy\"],\"articleSection\":[\"Bootstrap\",\"HTML CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\",\"datePublished\":\"2019-02-07T16:31:09+00:00\",\"dateModified\":\"2019-02-07T17:12:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\",\"contentUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/bootstrap-4-scrollspy\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 4 scrollspy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\\\/\\\/blog.pheonixsolutions.com\"],\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Bootstrap 4 Scrollspy Date posted : 07\/02\/2019 Scrollspy is used to automatically update links in a navigation list based on&nbsp;scroll&nbsp;position. How To Create a Scrollspy The following example shows how to create a scrollspy: Scrollspy Using Bootstrap 4 Example Explained Add&nbsp;data-spy=\"scroll\"&nbsp;to the element that should be used as the scrollable&hellip; Continue Reading Bootstrap 4 scrollspy","og_url":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2019-02-07T16:31:09+00:00","article_modified_time":"2019-02-07T17:12:37+00:00","og_image":[{"url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/"},"author":{"name":"admin","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503"},"headline":"Bootstrap 4 scrollspy","datePublished":"2019-02-07T16:31:09+00:00","dateModified":"2019-02-07T17:12:37+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/"},"wordCount":198,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png","keywords":["bootstrap 4","scrollspy"],"articleSection":["Bootstrap","HTML CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","url":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png","datePublished":"2019-02-07T16:31:09+00:00","dateModified":"2019-02-07T17:12:37+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#primaryimage","url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png","contentUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-07-at-10.13.16-PM-1024x124.png"},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-4-scrollspy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 4 scrollspy"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","caption":"admin"},"sameAs":["http:\/\/blog.pheonixsolutions.com"],"url":"https:\/\/pheonixsolutions.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-VS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3588"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}