Watermark Mootools帮助 [英] Watermark mootools help

问题描述

我是mootools的初学者.我知道很多html和CSS，但是javascript不适合我(至少现在我开始学习它了)...

I'm a mootools beginner. I know a lot of html and css but javascript is not for me (at least now that I'm starting to learn it)...

我看到了这篇文章: http://davidwalsh.name/mootools-watermark 这篇文章的特色是带有水印-转到顶部"按钮.

I saw this post: http://davidwalsh.name/mootools-watermark This post features this "watermark - Go To Top" button.

html:

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

css:

#gototop { display:none; position:fixed; right:5px; bottom:5px; }

javascript:

javascript:

<script type="text/javascript">
    window.addEvent('domready',function() {
        new SmoothScroll({duration:500});

        var go = $('gototop');

        go.set('opacity','0').setStyle('display','block');
        window.addEvent('scroll',function(e) {
            go.fade((window.getScroll().y > 300) ? 'in' : 'out')
        });

    });
</script>

我假装的是链接不如display:none;在CSS中显示，因为如果用户未打开javascript，则用户将看不到该按钮.

What I pretend is that the link don't be as display:none; in the css because if the user doesn't have javascript turned on then the user will not see the button.

所以，我想要隐藏它并仅在滚动大于300px之后显示它.如果用户没有在浏览器中打开javascript，那么他可以一直看到显示的按钮...

So, what I want is to hidde it and show it only after the scroll being bigger than 300px. If the user doesn't have javascript turned On in his browser, then he can see the button showed all the time...

因此，对于此html和CSS，我应该使用哪个javascirpt作为不透明度显示中的开/关:

So, for this html and css, which javascirpt should I use as a toggle on/off in the display of oppacity:

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

#gototop { display:block; position:fixed; right:5px; bottom:5px; }

有人可以帮助我吗?

谢谢，马特

推荐答案

window.addEvent('domready', function() {
   $('gototop').setStyle('display','none');
   ((window.getScrollSize().y + 300 )> window.getSize().y) ? $('gototop').fade(1) : $('gototop').fade(0)  
});

这篇关于Watermark Mootools帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！