更改不同窗口大小的pageScroller偏移量

时间:2014-04-29 21:32:21

标签: javascript css function scroller slicknav

对于我的网站,我使用jquery.pagescroller.lite.js。在.js文件中,我像这样使用了函数:

$(document).ready(function(){
    // initiate page scroller plugin
    $('body').pageScroller({
        navigation: '#nav',
        scrollOffset: -195
    });         
});

现在,我只需要在窗口大小介于768px和959px之间时更改scrollOffset值,并保持其他大小不变。

重要提示:请注意,对于这些窗口大小,标准导航栏(#nav)会被移动导航栏替换,并使用以下代码:

<script>
$(function(){
    $('#nav').slicknav();
});
</script>

我有两个问题

  1. 我注意到显示移动菜单时pagescroller脚本不起作用。我该如何解决?

  2. 如何在我的.css响应文件中调用pagescroller,以便更改选项? [可能@Eric Whitehead的答案会有效,但我首先要让pagescroller用于小窗口尺寸。]

1 个答案:

答案 0 :(得分:0)

处理此问题的最佳方法是为这些维度插入媒体查询

@media all and (max-width: 959px) and (min-width: 768px) {
    .dummy-tag {
        width: 255px;
     }
}

然后,在你的javascript中,将你的pagescroller包装好

if ($(".dummy-tag").css("width") == "255px" )  {
    $(document).ready(function(){
    // initiate page scroller plugin
    $('body').pageScroller({
    navigation: '#nav',
    scrollOffset: -195
    });         
 });
}