Question

我有这段代码：

jQuery(document).ready(function($){
    $('.navbar').css("background-color", "transparent");
    $(window).scroll(function(){
        if ($(this).scrollTop() > 600) {
            $('.navbar').css("background-color", 
            "rgba(255,255,255,0.9)").css("transition","0.3s ease-in-out ");
            $('.navbar a').css("color", "black");
        } 
        else {
            $('.navbar').css("background-color", 
            "transparent").css("transition","0.3s ease-in-out ");
            $('.navbar a').css("color", "white");
        }
    });
});

我可以使用一些帮助，我需要为此代码添加哪些代码才能在桌面上运行（宽度最小992px）。我不想在移动设备或平板电脑上使用此效果，所以我将非常感谢您的任何想法！

谢谢！

Answer 1

如果您将桌面定义为具有分辨率超过992的屏幕，那么这将起作用。如果您想使用用户代理来检测设备的类型，那么这也是可能的（并且可以说，更准确）。但是，只是为了造型而给你这样做，如果你的应用在技术上是正确的，那就无所谓了。

我建议您在调整大小功能中运行此代码或其版本，这样可以响应更改浏览器宽度的大小。

＆＃13;

$(document).ready(function($){
    $(document.body).resize(function () {
      var isDesktop = $(document).width() > 992;
      if (isDesktop) {
        $('.navbar').css("background-color", "transparent");
        $(window).scroll(function(){
            if ($(this).scrollTop() > 600) {
                $('.navbar').css("background-color", 
                "rgba(255,255,255,0.9)").css("transition","0.3s ease-in-out ");
                $('.navbar a').css("color", "black");
            } 
            else {
                $('.navbar').css("background-color", 
                "transparent").css("transition","0.3s ease-in-out ");
                $('.navbar a').css("color", "white");
            }
        });
      }
    }).resize();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery导航栏效果仅适用于桌面

1 个答案: