将鼠标悬停在页面上方以显示菜单

时间：2019-08-30 11:04:26

标签： javascript html css

使用下面的代码，我想实现下一个想法。现在，当我向下滚动页面时，菜单会随内容上移，但是例如，我想当我向下滚动页面时，通过将鼠标悬停在页面顶部，菜单会向上移至在顶部显示菜单。如何使用javascript做到这一点？ 

.first{
		display: flex;
    background:red;
	}
	.second{
		width: 200px;
		height: 250px;
	}
.container{
	display: flex;
	flex-direction: column;
}
<div class="container">
		<div class="first">
			<li>fff</li>
			<li>fff</li>
			<li>ff</li>
			<li>fff</li></div>
		<div class="second">
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
			     eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			     sit totam.
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			</div>
			<div>Ad cum cumque dolores odio quos sequi tenetur! Aliquid cupiditate facilis fugiat, impedit iste labore
			     libero modi necessitatibus nulla rerum soluta, suscipit. Aliquid culpa, eveniet molestias provident
			     reiciendis tempore velit!
			</div>
			<div>Cumque dolorum id natus. A alias aliquid culpa cum eaque earum harum, iusto natus nihil odit optio
			     pariatur, repellat veritatis? Corporis expedita magni non numquam recusandae sed sunt suscipit velit?
			</div>
			<div>Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			</div>
		</div>
	</div>

3 个答案:

答案 0 :(得分：1)

您可以使用此样式创建固定菜单

.first{
    display: flex;
    background: red;
    position: fixed;
    width: 100%;
    top: 5px;
    }

.container{
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 20px;
}

答案 1 :(得分：0)

请尝试以下代码。

CSS 

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.first{
    display: flex;
    background:red;
}
.second{
    width: 200px;
    height: 250px;
}
.container{
    display: flex;
    flex-direction: column;
}
.first.sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
}
.first.sticky:hover {
    opacity: 1;
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
}

JQUERY 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.0.min.js"><\/script>')</script>
<script>
    var firstheight = jQuery('.first').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() >= firstheight) {
            jQuery('.first').addClass("sticky");
            jQuery('.first').next().css("margin-top",firstheight);
        }
        else {
            jQuery('.first').removeClass("sticky");
            jQuery('.first').next().css("margin-top","0px");
        }
    });
</script>

答案 2 :(得分：0)

我所做的是将.first位置设置为fixed，并在滚动上将其隐藏（不透明度：0），然后在.first：hover事件发生时（当用户将光标放在屏幕顶部时） ，则会将不透明度触发为1（重要）。我添加了z-index属性，以确保没有最上面的内容。

代码如下：

// When the user scrolls down 300px, change opacity to 0. CSS will handle the hover
function toggleNav() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementsByClassName("first")[0].style.opacity = "0";
  } else {
    document.getElementsByClassName("first")[0].style.opacity = "1";
  }
} 
window.onscroll = function() {toggleNav();};
.first{
display: flex;
background: red;
/* the fixed position will put it on top of the screen */
position: fixed;
top: 0;
z-index: 9;
width: 100%;
height: 45px; /* just form demonstration purpose */
font-size: 30px;  /* just form demonstration purpose */
}	
.first:hover {opacity: 1!important;}
.second{
margin-top: 50px; /* since the .first is fixed postion */
  width: 200px;
  height: 250px;
}
.container{
z-index: 8;
  display: flex;
  flex-direction: column;
}
<div class="container">
	<div class="first">
	  <li>Text1</li>
	  <li>Text2</li>
	  <li>Text3</li>
	  <li>Text4</li>
  </div>

 	<div class="second">
	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
   	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
   	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
   	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
   	  <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
 	        eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			sit totam.
	  </div>
    </div>
  </div>

希望这就是您想要的。享受代码！

相关问题
最新问题