Question

我滚动时导航栏的不透明度会发生变化，其更改速率取决于窗口的宽度。加载页面后，我尝试更改宽度，但不透明度变化率仍然相同。有没有办法让不透明度变化率参数自动更改而不刷新页面？

if ($(window).width() > 1060) {
   fadenumber = 500;
}
else if ($(window).width() > 800){
    fadenumber = 600;
}
else if ($(window).width() > 600){
   fadenumber = 400;
}
else {
    fadenumber = 200;
}

$(document).on('scroll', function () {
    $('.navbar').css('opacity', ($(document).scrollTop() / fadenumber));
    var fadeStart=0 ,fadeUntil=fadenumber;
        var offset = $(document).scrollTop(),opacity=0 
        ;
        if( offset<=fadeStart ){
            opacity=1;
        }else if( offset<=fadeUntil ){
            opacity=1-offset/fadeUntil;
        }
        $('.icon').css('opacity',opacity).html(opacity);
});

谢谢

Answer 1

窗口或DOM对象调整大小的事件。

因此，您可以创建一个执行此操作的事件侦听器。

这里是如何获得大小并添加一个监听器。（这里还有我为此写的更深入的jsfiddle：http://jsfiddle.net/snlacks/65mL7btd/）

var outputDiv = $('#outputjq');

function callback(){
    outputDiv.html(window.innerWidth);
}

$(window).on('resize', callback);

callback();

如果您想更改费率，可以增加回调内的费率。

function callback2(){
    if ($(window).width() > 1060) {
       fadenumber = 500;
    }
    else if ($(window).width() > 800){
        fadenumber = 600;
    }
    else if ($(window).width() > 600){
       fadenumber = 400;
    }
    else {
        fadenumber = 200;
    }
}

var fadenumber;

$(window).on('resize', callback2);

callback2();

Answer 2

var onScroll;
$(document).on('scroll', onScroll = function () {
    $('.navbar').css('opacity', ($(document).scrollTop() / fadenumber));
    var fadeStart=0 ,fadeUntil=fadenumber;
        var offset = $(document).scrollTop(),opacity=0 
        ;
        if( offset<=fadeStart ){
            opacity=1;
        }else if( offset<=fadeUntil ){
            opacity=1-offset/fadeUntil;
        }
        $('.icon').css('opacity',opacity).html(opacity);
});
$(document).on('resize', function () {
if ($(window).width() > 1060) {
       fadenumber = 500;
    }
    else if ($(window).width() > 800){
        fadenumber = 600;
    }
    else if ($(window).width() > 600){
       fadenumber = 400;
    }
    else {
        fadenumber = 200;
    }
onScroll();
});

[你应该首先将变量设为全局]

解释器将在调整大小后检查宽度。您可以将调整大小的函数代码（不带onScroll（）;）复制到滚动函数中，因此它也会在滚动文档时检查宽度。

修改

您可以在onResize函数之后放置（）以确保在文档准备就绪时设置变量（并且您可以将所有变量放入$（document）.ready（）），如下所示：

$(document).ready(function(){ var onResize; $(document).on('resize', onResize = function () { if ($(window).width() > 1060) { fadenumber = 500; } else if ($(window).width() > 800){ fadenumber = 600; } else if ($(window).width() > 600){ fadenumber = 400; } else { fadenumber = 200; } }()); // () to launch function right after it's declared });

Answer 3

if ($(window).width() > 1060) {
   fadenumber = 500;
}
else if ($(window).width() > 800){
    fadenumber = 600;
}
else if ($(window).width() > 600){
   fadenumber = 400;
}
else {
    fadenumber = 200;
}

changeOpacityRate();

$(document).on('scroll', function () 
{
    changeOpacityRate();
});

function changeOpacityRate()
{
    $('.navbar').css('opacity', ($(document).scrollTop() / fadenumber));
    var fadeStart=0 ,fadeUntil=fadenumber;
    var offset = $(document).scrollTop(),opacity=0 ;
    if( offset<=fadeStart )
    {
        opacity=1;
    }
    else if( offset<=fadeUntil )
    {
        opacity=1-offset/fadeUntil;
    }
    $('.icon').css('opacity',opacity).html(opacity);
}

刷新javascript页面而不刷新HTML，但作为windows＆＃39;宽度变化

3 个答案: