基于视口大小的jquery更改脚本

下面的代码旨在将用户位于页面顶部的类.active添加到我的div（#sidebar）中。此外，如果手动展开页面和div进一步向下（添加.active），则.active类将保持不变，除非用户向上或向下移动100px（.line用作测量此标记的标记）。基于视口大小的jquery更改脚本

我试图调整下面的代码来保留所有这些功能，但在移动时完全禁用它，即小于414px。

有什么建议吗？

/* Expand/Collapse sidebar based on position in page */ 
var relativeY = $("#sidebar").offset().top - $(".line").offset().top; 

$(window).scroll(function(){ 

relativeY = $("#sidebar").offset().top - $(".line").offset().top;  
console.log(relativeY); 
    if(relativeY > 100 || relativeY < -100) { 
     $("#sidebar").removeClass("active"); 
     $("#sidebarToggle").removeClass("active"); 
     $(".line").css("top","0") 
    } 
    else { 
     $("#sidebar").addClass("active"); 
     $("#sidebarToggle").addClass("active"); 
    } 
});

编辑

我试图实现（$ window.width（）> 414）下方，但它不工作？

/* Expand/Collapse sidebar based on position in page */ 
var relativeY = $("#sidebar").offset().top - $(".line").offset().top; 

$(window).scroll(function(){ 

relativeY = $("#sidebar").offset().top - $(".line").offset().top;  
console.log(relativeY); 

if ($window.width() > 414) { 
    if (relativeY > 100 || relativeY < -100) { 
    $("#sidebar").removeClass("active"); 
    $("#sidebarToggle").removeClass("active"); 
    $(".line").css("top", "0") 
    } else { 
    $("#sidebar").addClass("active"); 
    $("#sidebarToggle").addClass("active"); 
    } 
} 
});

来源

2015-12-17 dungey_140

检查window.innerWidth - 使用if语句来有条件地运行的代码。如果这不起作用，这不是你列出的问题。

由于$（window）.scroll（）是一个事件处理程序，所以函数的上下文可能不在变量'var relativeY'之外，导致意外的行为。

/* Expand/Collapse sidebar based on position in page */ 
var relativeY = $("#sidebar").offset().top - $(".line").offset().top; 

$(window).scroll(function(){ 
if(window.innerWidth > 414) { 
    relativeY = $("#sidebar").offset().top - $(".line").offset().top;  
    console.log(relativeY); 
    if(relativeY > 100 || relativeY < -100) { 
     $("#sidebar").removeClass("active"); 
     $("#sidebarToggle").removeClass("active"); 
     $(".line").css("top","0") 
    } 
    else { 
     $("#sidebar").addClass("active"); 
     $("#sidebarToggle").addClass("active"); 
    } 
} 
});

来源

2015-12-17 14:43:54

辉煌，谢谢:) 所有我不得不改变在上面的代码是如果（window.innerWidth> 414）{为了使我的需求工作。 innerWidth似乎是一个很大的因素，任何想法为何如此重要？ –

我很高兴得到了帮助。我不能说为什么，这可能与许多不同的因素有关。然而，一般的经验法则是“保持简单” - .innerWidth是一个内置于浏览器中的属性。$（window）.width（）是一个jQuery函数 –

奇怪的错误 - 这在桌面浏览器和它也具有预期的效果。但是，在iPad等触摸设备上（414像素以上），脚本会反向运行？即滚动时添加.active？ –

你可以使用类似$(window).width()得到窗口的宽度和运行脚本相应

来源

2015-12-17 14:35:41 Kageetai

嗨@Kageetai，我已经编辑了上面的问题与我以前尝试过的尝试，但它不起作用？你能帮我调整片段吗？ –

正确的语法是'$（window）.width（）;'也许你甚至想要使用文档宽度更加精确：'$（document）.width（）;' – Kageetai

基于视口大小的jquery更改脚本

回答

相关问题