0

我正在尝试修改以下脚本，以使其对禁用 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(函数(){

至

$('.div-class,.another-div-class').each(function(){

4

1 回答 1

0

正如 Anthony 在评论中所指出的，如果用户禁用了 JavaScript，那么该代码将完全执行，因为它本身就是 JavaScript。

您可能需要反转您的逻辑并构建您的 HTML 页面，这样没有 JavaScript 就可以了，然后在您的 JavaScript 中添加任何额外的内容或使用 JavaScript 隐藏/更改 DOM 的某些部分，以使其更适合使用 JavaScript 的人。

我倾向于（但知道我会被所有非 JS 人员发起）还指出您需要权衡少数非 Javascript 人员是否值得您花费额外的时间和精力，或者您是否可以只使用我们的朋友<noscript>标签告诉他们您网站的某些部分需要 JavaScript 才能正确显示。当然，让您的网站优雅降级是一种很好的做法，但请记住，让网站真正正常运行可能比确保每个案例都适用于每个人更重要。我见过太多人陷入试图取悦所有人的陷阱，却从未真正发布他们的产品！

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

于 2013-05-10T09:03:32.993 回答