{"id":5535,"date":"2023-12-28T04:41:10","date_gmt":"2023-12-28T04:41:10","guid":{"rendered":"https:\/\/graphica.pe\/header-sticky-in-scrolltop\/"},"modified":"2024-07-11T20:55:37","modified_gmt":"2024-07-11T20:55:37","slug":"header-sticky-in-scrolltop","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/header-sticky-in-scrolltop\/","title":{"rendered":"Header Sticky in ScrollTop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5535\" class=\"elementor elementor-5535 elementor-4581\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9369abd e-flex e-con-boxed e-con e-parent\" data-id=\"9369abd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd6506c elementor-widget elementor-widget-text-editor\" data-id=\"fd6506c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>What we will achieve:  <\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-4589 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/CPT2312272344-1428x735-1.gif\" alt=\"\" width=\"1428\" height=\"735\"><\/p>\n<p>For this, we must create our Header template with Elementor and configure the Sticky Top:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5044 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/2.webp\" alt=\"\" width=\"669\" height=\"727\" srcset=\"https:\/\/graphica.pe\/wp-content\/uploads\/2.webp 669w, https:\/\/graphica.pe\/wp-content\/uploads\/2-276x300.webp 276w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/p>\n<p>You must also add the <em>header<\/em> class to your section containing the menu.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5034 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/header-sticky-2.png\" alt=\"\" width=\"702\" height=\"623\" srcset=\"https:\/\/graphica.pe\/wp-content\/uploads\/\/header-sticky-2.png 702w, https:\/\/graphica.pe\/wp-content\/uploads\/\/header-sticky-2-300x266.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><\/p>\n<p>Then we are going to add the CSS styles in the style <strong>.css<\/strong> stylesheet:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a17339f elementor-widget elementor-widget-code-highlight\" data-id=\"a17339f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.header {\r\n\ttransition: .6s !important;\r\n\tmin-width: 100% !important;\r\n}\r\n\r\n.header.scrolled {\r\n\tbackground: #0A0A0A; \/*o el color que quieras*\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d3a279 elementor-widget elementor-widget-text-editor\" data-id=\"2d3a279\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we add some important libraries in our<strong> function.php<\/strong><\/p>\n<p>Probably in your theme you already have the function that calls the css and js sheets, so, if that&#8217;s the case,<strong> just add lines 6 and 7 to your function<\/strong>.<\/p>\n<p>Libraries <strong>should always be called<\/strong> before your js sheet where the code that does the magic will be.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2ee534 elementor-widget elementor-widget-code-highlight\" data-id=\"c2ee534\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"6,7\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ AGREGAR CUTOM JS\/CSS\nfunction add_scripts_proyecto() {\n\t\n\t$rand = rand(0, 999999999);\n\t\n\twp_enqueue_script( 'script_gsap', '\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js', array ( 'jquery' ));\n\twp_enqueue_script( 'script_gsapscroll', '\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js', array ( 'jquery' ));\n\twp_enqueue_script( 'script_custom', get_stylesheet_directory_uri() . '\/custom.js', array ( 'jquery' ), $rand);\n\t\n\t\/\/ CSS\n    wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'hello-elementor','hello-elementor','hello-elementor-theme-style' ), $rand );\n\t\n    wp_localize_script( 'script_custom', 'proyecto', [\n        'is_mobile' => intval( wp_is_mobile() ),\n    ]);\n}\nadd_action( 'wp_enqueue_scripts', 'add_scripts_proyecto' );<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e3896d elementor-widget elementor-widget-text-editor\" data-id=\"4e3896d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we add the JS in the <strong>javascrip sheet<\/strong> you are using:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95df758 elementor-widget elementor-widget-code-highlight\" data-id=\"95df758\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$(window).on('load', function() {\r\n\t\tsetTimeout(function() {\r\n\t\t\tscrollHeaderToggle();\r\n\t\t}, 1000)\r\n\t})\r\n\r\nfunction scrollHeaderToggle() {\r\n\t\tlet lastScrollTop = 0;\r\n\t\tconst header = document.querySelector('.elementor-sticky.header');\r\n\r\n\t\tconst height = header.offsetHeight + 10;\r\n\t\twindow.addEventListener('scroll', function () {\r\n\t\t\tlet st = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n\t\t\t\/\/ Check if the page is scrolled\r\n\t\t\tif (st > 0) {\r\n\t\t\t\t\/\/ Add a class when scrolled\r\n\t\t\t\theader.classList.add('scrolled');\r\n\t\t\t} else {\r\n\t\t\t\t\/\/ Remove the class when at the top\r\n\t\t\t\theader.classList.remove('scrolled');\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Check scroll direction\r\n\t\t\tif (st > lastScrollTop) {\r\n\t\t\t\theader.style.top = -height + 'px';\r\n\t\t\t} else {\r\n\t\t\t\theader.style.top = '0';\r\n\t\t\t}\r\n\r\n\t\t\tlastScrollTop = st;\r\n\t\t});\r\n\r\n\t\twindow.dispatchEvent(new CustomEvent('scroll'))\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fc7f60 elementor-widget elementor-widget-text-editor\" data-id=\"6fc7f60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And that&#8217;s it!  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What we will achieve: For this, we must create our Header template with Elementor and configure the Sticky Top: You must also add the header class to your section containing the menu. Then we are going to add the CSS styles in the style .css stylesheet: .header { transition: .6s !important; min-width: 100% !important; } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5535","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5535"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5535\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}