javascript - 使标题保持在一定的窗口宽度？

Question

所以我的问题是如何让我的页眉在滚动时仅在特定的设备宽度上有效？

function fixDiv() {
  var $div = $("#header-full-top");
  if ($(window).scrollTop() > $div.data("top")) {
    $('#header-full-top').css({
      'position': 'fixed',
      'top': '0',
      'width': '100%'
    });
  } else {
    $('#header-full-top').css({
      'position': 'static',
      'top': 'auto',
      'width': '100%'
    });
  }
}

$("#header-full-top").data("top", $("#header-full-top").offset().top); // set original position on load
$(window).scroll(fixDiv);

Fiddle

Answer 1

        function fixDiv() {
            var getWindowWidth  = $(window).width();
            //approximate above medium screen widths includes large and medium screens.
//exactly not sure, from where the medium screen sizes starts from, just you need to change 767 in order to checkout your result
            if(getWindowWidth>767) {
                $('#header-full-top').css({
                  'position': 'fixed',
                  'top': '0',
                  'width': '100%'
                });
            }
            else {
                $('#header-full-top').css({
                  'position': 'static',
                  'top': 'auto',
                  'width': '100%'
                });
            }
        }
        fixDiv();
        $(window).resize(fixDiv);

检查上面的代码，$(window).width() 返回调用您的网页或文档的窗口宽度。因此，您可以利用宽度值使用 jquery 或其他语句根据窗口宽度有条件地应用 css。

https://jsfiddle.net/L5xxjbn2/2/