Question

我正在尝试修改下面的脚本，以使其对禁用Javascript的用户更友好。下面的代码将滚动位置上所有div的不透明度设置为0和1。我想通过手动添加类'hideme'来隐藏特定的div，并在滚动时显示它们。

$(document).ready(function() {

/* Hide all elements outside the visible window */
$('body *').each( function(){

    var top_of_object = $(this).position().top;
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    if( bottom_of_window < top_of_object  ){

        $(this).addClass('hideme').css({'opacity':'0'});

    }

});

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of the desired elements */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();


            if( bottom_of_window > ( bottom_of_object + 20 )  ){

                $(this).removeClass('hideme').animate({'opacity':'1'},500);

            }

    }); 

});

 });

我想出了如何指定所选的div，只需更改下面的代码

$（'body *'）。each（function（）{

到

$（'。div-class，.another-div-class'）。each（function（）{

Answer 1

正如Anthony在评论中指出的那样，如果用户已经禁用了JavaScript本身就是JavaScript，那么该代码就会执行。

您可能需要反转逻辑并构建HTML页面，以便在没有JavaScript的情况下使用它，然后在JavaScript中添加任何额外内容或使用JavaScript隐藏/更改DOM的某些部分以使其更好地适用于人用JavaScript。

我觉得有点倾向（但我知道我会由所有非JS人员发起）也指出你需要权衡一小部分非Javascripters是否值得花费额外的时间和精力带你，或者你是否可以使用我们的朋友<noscript>标签告诉他们您的网站部分需要JavaScript才能正确显示。当然，优良做法是让您的网站优雅地降级，但请记住，实际上有一个网站工作可能比确保每个案例适用于每个人更重要。我看到太多人陷入了试图取悦所有人而从未实际发布他们的产品的陷阱！

我知道这并不能给你任何可靠的答案，但对你来说这可能是一个很好的起点。

在非javascript浏览器支持的情况下显示滚动的特定div

1 个答案: