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/

在某个窗口宽度上制作标题棒？

1 个答案: