Astra Free免费主题添加导航栏页面下滑跟随sticky效果

导航栏页面下滑跟随sticky效果是网站导航菜单的视觉形式,用于在向下滚动时保持固定。下面让我们来开始操作添加 导航栏下滑跟随效果,全程不需要额外购买Pro主题或者付费插件。

如何在 Astra 中免费制作粘性标题

Astra免费和专业功能存在差异。专业人士有粘性标题选项,但免费版本没有。现在您可能有一个问题,是否可以在 Astra 免费版本中制作粘性标题?是的,有一种方法可以使用几行代码使标头粘性。我们为您提供一个现成的自定义脚本。除了粘性标头,我们还添加了一个 Java 脚本代码,以使标头具有滚动效果。

注意:CSS 和 JS 脚本协同工作(也就是需要添加css和js才能正常工作如果只添加了一个不起作用的),因此您需要同时使用两者来获得具有滚动效果的粘性标头。我们为您带来了 2 个代码片段,需要在两个不同的地方添加。

步骤:

1.添加自定义 CSS 代码

复制CSS代码到,后台—>外观—>自定义(如图)

/*Make Header Sticky*/
.df_fixed_header .site-header{
    position: fixed !important;
    top: 0;
    width: 100%;
}

/*Adjust Content Padding*/
.df_fixed_header .site-content {
    padding-top: 170px;
}

@media (min-width: 980px) {
 .df_fixed_header .site-content{
        padding-top: 100px;
    }
	/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
	.df_fixed_header 	.site-content .main-navigation {
				position: fixed;
				margin-top: 0px;
	}
}   

@media (min-width: 767px) {
  .df_fixed_header .site-content {
        padding-top: 150px;
    }
	/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
	.df_fixed_header 	.site-content .main-navigation {
				position: fixed;
				margin-top: 60px;
	}

}

2.添加自定义JS代码

复制JS代码添加到,后台—>外观—>编辑—>header.php,header.php里面的</head>之前

<script>

	window.addEventListener("scroll", function(event) {
		const body = document.body;
		var top  = window.pageYOffset || document.documentElement.scrollTop;
		if (top >= 70) {
			
			body.classList.add("df_fixed_header");
			
		} 
		else {
			body.classList.remove("df_fixed_header");
			
		}
	}, false);
	</script> 

应用代码后,检查预览以查看它是否正常工作。我们添加了一个代码,用于向下滚动时出现抖动效果。我们使用的代码响应桌面、选项卡和移动设备。我们已经检查了它们,它工作得很好。

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员!
WordPress外贸建站 » Astra Free免费主题添加导航栏页面下滑跟随sticky效果

查看优质的WP整站案例

立即查看 联系我们