{"id":1698,"date":"2020-06-15T14:01:04","date_gmt":"2020-06-15T14:01:04","guid":{"rendered":"https:\/\/toolbox.divilover.com\/?p=1698"},"modified":"2021-10-20T15:09:24","modified_gmt":"2021-10-20T15:09:24","slug":"sticky-elements","status":"publish","type":"post","link":"https:\/\/toolbox.divilover.com\/sticky-elements\/","title":{"rendered":"Sticky Elements"},"content":{"rendered":"

Divi Toolbox\u00a0\u279c<\/span> Global \u279c\u00a0<\/span>Sticky Elements<\/h2>\n

This feature adds ads an option to stick any element to the top of the page upon scroll. Once enabled, you can define addtional settings:<\/p>\n

    \n
  • Top Offset – <\/strong>the space between top of page and sticky element.<\/li>\n
  • \n
    Mobile Breakpoint<\/strong> – Define the screen width, below which the elements won’t stick to the top.<\/div>\n<\/li>\n<\/ul>\n

     <\/p>\n

    There are two types of Sticky elements you can use:<\/p>\n

     <\/p>\n

    1. Simple Sticky Elements – stick inside the container<\/h4>\n

    To make any element sticky (preferably a column or a module), navigate to element’s Settings \u2192 Advanced tab \u2192 CSS ID & Classes \u2192 CSS Class and add a\u00a0custom class of:\u00a0dtb-sticky<\/strong><\/p>\n

    Element with this CSS class will stick (stop scrolling) when it reaches the top of the page when you scroll down. It will un\u2011stick and move up once it reaches the bottom of the parent container. If used on a module, make sure that the “Equalize Column Heights” option is enabled in the parent Row settings.<\/p>\n

    Use Custom Selectors<\/h5>\n

    Check this option to use custom CSS selectors for the simple sticky elements. Separate multiple selectors with commas. The enetered selector needs to be specified as in the CSS file, with a dot symbol if it’s a CSS class or with the # symbol if the target is element’s CSS ID. You can include multiple additional custom selectors (separate with commas).<\/p>\n

     <\/p>\n

    2. Global Sticky Element – sticks outside the container, relative to page window<\/h4>\n

    A single element can become sticky once it reaches the top of the page, and stay sticky even when you scroll past it’s parent container. This effect can be applied to only one element per page.<\/p>\n

    If you enable the option and assign a CSS Class or ID of the sticky element, make sure your selector is unique (there is only one element on the page with the selector you’re using). You can also assign a CSS Class or ID of the “push-up” element, which is located below the sticky element and will un-stick it upon scroll.<\/p>\n

    Global Sticky Element Selector<\/h5>\n

    Assign a CSS Class or ID of the sticky element, make sure your selector is unique (there is only one element on the page with the selector you’re using). Use dot if it’s a classname or # symbol if it’s an ID (.sampleClass or #sampleID)<\/p>\n

    “Push-Up” Element Selector (optional)<\/h5>\n

    You can assign a CSS Class or ID of the “push-up” element, which is located below the sticky element and will un-stick it upon scroll.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Divi Toolbox\u00a0\u279c Global \u279c\u00a0Sticky Elements This feature adds ads an option to stick any element to the top of the page upon scroll. Once enabled, you can define addtional settings: Top Offset – the space between top of page and sticky element. Mobile Breakpoint – Define the screen width, below which the elements won’t stick […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1698","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/posts\/1698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/comments?post=1698"}],"version-history":[{"count":5,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/posts\/1698\/revisions"}],"predecessor-version":[{"id":2192,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/posts\/1698\/revisions\/2192"}],"wp:attachment":[{"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/media?parent=1698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/categories?post=1698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toolbox.divilover.com\/wp-json\/wp\/v2\/tags?post=1698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}