mootools_使用MooTools或jQuery创建不透明的性感持久标题

落日映苍穹つ 2023-02-22 03:33 5阅读 0赞

mootools

I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the top of the window and the opacity set to 50%. I've implemented this technique in my current design and have gotten numerous requests for a tutorial so...here you go!

最近，我一直在使用Magento电子商务解决方案，并且喜欢他们在管理控制面板顶部栏中使用的技术。 当用户滚动到指定阈值以下时，顶部栏将附加到窗口顶部，并且不透明度设置为50％。 我已经在目前的设计中实现了这项技术，并且已经收到了许多关于教程的要求，所以...就在这里！

[View Demo][] [查看演示][View Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

## HTML **(**The HTML**)** ##

Top of Page Bottom of Page

A DIV with whatever elements and structure you'd like within it.

一个DIV，其中包含您想要的任何元素和结构。

## CSS **(**The CSS**)** ##

#uberbar	{ 
    	border-bottom:1px solid #eb7429; 
    	background:#fc9453; 
    	padding:10px 20px; 
    	position:fixed; 
    	top:0; 
    	left:0; 
    	z-index:2000; 
    	width:100%;
    }

Using position:fixed will allow the bar to degrade well within Internet Explorer 6 by simply keeping the bar at the top. Be sure to position the element at 0x0and set a 100% width. You may style the DIV any way you'd like but I'd recommend keeping the height of your element to a minimum.

通过使用position：fixed，只需将栏保持在顶部即可使栏在Internet Explorer 6中很好地降级。 确保将元素放置在0x0处并设置100％的宽度。 您可以按照自己的方式对DIV进行样式设置，但我建议您将元素的高度保持在最低水平。

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

Once all of our settings are in place, I use my [ScrollSpy plugin][] to set minimum and maximum (enter and exit) vertical scroll values and add/remove mouseover and mouseenter events accordingly. The events are added to return the bar t0 100% opacity when the user mouses over the bar. ScrollSpy allows you to focus on functionality and not worry about keeping track of scroll position. You'll notice that I've not accounted for making the bar scroll in IE6 using JavaScript -- if you'd like this effect to work in IE6, I recommend using ScrollSpy's onTick(pos) method to position the bar while scrolling.

完成所有设置后，我将使用[ScrollSpy插件][ScrollSpy plugin]设置最小和最大(输入和退出)垂直滚动值，并相应地添加/删除mouseover和mouseenter事件。 当用户将鼠标悬停在条上时，会添加事件以返回t0 100％不透明度。 ScrollSpy使您可以专注于功能，而不必担心跟踪滚动位置。 您会注意到，我没有考虑使用JavaScript在IE6中滚动条-如果您希望这种效果在IE6中起作用，我建议您在滚动时使用ScrollSpy的onTick(pos)方法放置条。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	(function() {
    		//settings
    		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
    		var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
    		var inside = false;
    		//do
    		$(window).scroll(function() {
    			position = $(window).scrollTop();
    			if(position > topDistance && !inside) {
    				//add events
    				topbarML();
    				$('#uberbar').bind('mouseenter',topbarME);
    				$('#uberbar').bind('mouseleave',topbarML);
    				inside = true;
    			}
    			else if (position < topDistance){
    				topbarME();
    				$('#uberbar').unbind('mouseenter',topbarME);
    				$('#uberbar').unbind('mouseleave',topbarML);
    				inside = false;
    			}
    		});
    	})();
    });

The above jQuery code will accomplish the same effect.

上面的jQuery代码将实现相同的效果。

[View Demo][] [查看演示][View Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

This isn't the type of effect you'd want to use on most websites but it can be a great utility for websites that need to be highly functional.

这不是您想在大多数网站上使用的效果类型，但是对于需要高功能的网站来说，它可能是一个很好的实用工具。

> 翻译自: [https://davidwalsh.name/persistent-header-opacity][https_davidwalsh.name_persistent-header-opacity]

mootools

[View Demo]: https://davidwalsh.name/demo/top-bar-opacity.php
[View jQuery Demo]: https://davidwalsh.name/demo/top-bar-opacity.php?library=jquery
[ScrollSpy plugin]: https://davidwalsh.name/scrollspy
[https_davidwalsh.name_persistent-header-opacity]: https://davidwalsh.name/persistent-header-opacity