滚动时将图像从屏幕中间移动到角落答案

【问题标题】：Moving image from mid of screen to corner on scroll滚动时将图像从屏幕中间移动到角落
【发布时间】：2019-11-12 22:17:50
【问题描述】：

嘿，我对此有点陌生，所以请原谅我任何明显的错误，谢谢:)

因此，每当您开始滚动时，我都需要一个图像从屏幕中间移动到屏幕角落。我能够做到这一点。唯一的问题是，当我滚动回顶部时，图像不会回到原来的位置。

提前感谢您的帮助:)

 window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("logo").style.width = "70px";
        document.getElementById("logo").style.margin = "0px";
        document.getElementById("logo").style.position = "fixed";
      } else {
        document.getElementById("logo").style.width = "30%";
        document.getElementById("logo").style.margin = "0 auto";
        document.getElementById("logo").style.position = "relative";
      }
    }

#logo {
    	width: 30%;
    	transition: 0.5s;
    	margin: 0 auto;
    	margin-top: 15%;
    }
    
    
    .scroll {
    	height: 1200px;
    }

<!Doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://use.typekit.net/siu5pjx.css">
    </head>     
<body>
    
    <!--LOGO-->
    <div id="logo">
    	<a href="<?php echo get_page_link( get_page_by_title( home )->ID ); ?>">
    		<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="100%">
    	</a>
    </div>
    
    <div class="scroll"></div>  
</body>
</html>

【问题讨论】：

当我测试它时它似乎可以正常工作......不确定问题是什么？

标签： javascript html css

【解决方案1】：

所以问题是当你向上滚动时，你没有添加margin。

这可以通过使用 javascript 添加重新添加边距来简单地解决。

window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("logo").style.width = "70px";
        document.getElementById("logo").style.margin = "0px";
        document.getElementById("logo").style.position = "fixed";
      } else {
        document.getElementById("logo").style.width = "30%";
        document.getElementById("logo").style.margin = "0 auto";
        document.getElementById("logo").style.marginTop = "15%";
        document.getElementById("logo").style.position = "relative";
      }
    }

#logo {
    	width: 30%;
    	transition: 0.5s;
    	margin: 0 auto;
    	margin-top: 15%;
    }
    
    
    .scroll {
    	height: 1200px;
    }

<!Doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://use.typekit.net/siu5pjx.css">
    </head>     
<body>
    
    <!--LOGO-->
    <div id="logo">
    	<a href="<?php echo get_page_link( get_page_by_title( home )->ID ); ?>">
    		<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="100%">
    	</a>
    </div>
    
    <div class="scroll"></div>  
</body>
</html>

【讨论】：