{"id":3588,"date":"2019-02-07T22:01:09","date_gmt":"2019-02-07T16:31:09","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?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

Bootstrap 4 Scrollspy<\/h3>\n\n\n\n

Date posted : 07\/02\/2019<\/h4>\n\n\n\n

Scrollspy is used to automatically update links in a navigation list based on scroll<\/strong> position.<\/p>\n\n\n\n

\n\n\n\n

How To Create a Scrollspy<\/h3>\n\n\n\n

The following example shows how to create a scrollspy:<\/p>\n\n\n\n

Scrollspy Using Bootstrap 4<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <title>Bootstrap Example<\/title>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/css\/bootstrap.min.css\">\n  https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js<\/a>\n  https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js<\/a>\n  https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js<\/a>\n  <style>\n  body {\n      position: relative; \n  }\n  <\/style>\n<\/head>\n<body data-spy=\"scroll\" data-target=\".navbar\" data-offset=\"50\">\n\n<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-top\">  \n  <ul class=\"navbar-nav\">\n    <li class=\"nav-item\">\n      <a class=\"nav-link\" href=\"#section1\">Section 1<\/a>\n    <\/li>\n    <li class=\"nav-item\">\n      <a class=\"nav-link\" href=\"#section2\">Section 2<\/a>\n    <\/li>\n    <li class=\"nav-item\">\n      <a class=\"nav-link\" href=\"#section3\">Section 3<\/a>\n    <\/li>\n    <li class=\"nav-item dropdown\">\n      <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbardrop\" data-toggle=\"dropdown\">\n        Section 4\n      <\/a>\n      
\n        Link 1<\/a>\n        Link 2<\/a>\n      <\/div>\n    <\/li>\n  <\/ul>\n<\/nav>\n\n
\n  
Section 1<\/h1>\n  
NEVER EVER GIVE UP <\/p>\n  
SURVIVAL $$$$$$$$<\/p>\n<\/div>\n
\n  
Section 2<\/h1>\n  
NATURE IS MOTHER OF GOD(())<\/p>\n  
 TRUE FRIENSHIP MAKES HAPPIER ^^^^^^^^^^2<\/p>\n<\/div>\n
\n  
Section 3<\/h1>\n  
TRUE LOVE %%%%%%%%%%%%<\/p>\n  
CREATIVITY ***************<\/p>\n<\/div>\n
\n  
Section 4 Submenu 1<\/h1>\n  
HURRAY$$$$$$$$$$$<\/p>\n  
HAVE FUN ################<\/p>\n<\/div>\n
\n  
Section 4 Submenu 2<\/h1>\n  
HELLO !!!!!!<\/p>\n  
SUCCESS !!!!!!!!!!!!!!!!!<\/p>\n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
Example Explained<\/h3>\n\n\n\n
Add data-spy=\"scroll\"<\/code> to the element that should be used as the scrollable area (often this is the <body><\/code> element).<\/p>\n\n\n\n
Then add the data-target<\/code> attribute with a value of the id or the class name of the navigation bar (.navbar<\/code>). This is to make sure that the navbar is connected with the scrollable area.<\/p>\n\n\n\n
The optional data-offset<\/code> 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
Note : Requires relative positioning: <\/strong>The element with data-spy=”scroll” requires the CSS position<\/strong> property, with a value of “relative” to work properly.<\/p>\n\n\n\n
End output and results<\/h4>\n\n\n\n
\"\"
SECTION 1<\/figcaption><\/figure>\n\n\n\n
\"\"
SECTION 2
<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Thanks for using  pheonix solutions.<\/p>\n\n\n\n
Share it with your friends if you find this article is helpful.Thanks a lot.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap 4 Scrollspy Date posted : 07\/02\/2019 Scrollspy is used to automatically update links in a navigation list based on scroll position. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[479,555],"class_list":["post-3588","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap-4","tag-scrollspy","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-VS","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_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}]}}