Question

我来自非开发者背景，我正在为我的摄影作品制作一个divi主题的WordPress网页。我想在滑块模块中使用淡出元素。所以它的作用是当我们向下滚动页面元素向上移动并淡出时。例如：http://codepen.io/nickcil/pen/sfutl/

所以我把这段代码（下面）放到了预期的效果：

<!DOCTYPE html>
<html>
<head>
		
	   <style>
	       body {
		  margin: 0;
		  height: 1000px;
		}
			
		.top {
		  margin: 0;
		  position: relative;
		  width: 100%;
		  background-color: #aaa;
		  height: 300px;
		  opacity: 1;
		  text-align: center;
		  font-family: 'helvetica';
		  font-size: 80px;
		  font-weight: 100;
		  color: #fff;
		}

		.title {
		  position: absolute;
		  top: 60%;
		  left: 100px;
		}
	</style>
	
	    
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	    
	<script>
   	    $(window).scroll(function(){
   	        $(".top").css("opacity", 1 - $(window).scrollTop() / 150);
   	    });
	</script>
</head>
<body>
    <div class="top">
        <div class="title">
		  Fade Away
        </div>
    </div>  
</body>
</html>

我做了什么，将上述代码放在xyz Html（wordpress插件）中并获取Snippet Short Code并将此Snippet Short Code放入模块中。但问题是在页面加载后。滚动到徽标的标题转换/效果消失了，我无法在滚动时看到我的徽标（中心内联徽标标题样式）。有人可以帮我解决这个问题。进行淡出效果的流程/步骤/程序将对我有很大帮助。

淡出不起作用的代码

0 个答案: