Question

我觉得自己是一个疯狂的人问这个问题，但是我的页面上有一个表单，当你滚动时，它会“关注”你的页面。代码工作得很漂亮，除了一个疯狂的bug;当我打开chrome的开发人员工具并且我的表单添加了.fixed类时，表单会被抛出页面。我不知道为什么会这样，或者如何解决它，因为我认为打开开发人员工具根本不会影响DOM。知道为什么会这样，或者如何解决它？这是JS / css片段：

if (!msie6) {
  var top = $('.form-frame').offset().top - parseFloat($('.form-frame').css('margin-top').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, add the fixed class
      $('.form-frame').addClass('fixed');
    } else {
      // otherwise remove it
      $('.form-frame').removeClass('fixed');
    }
  });
}

sass如下：

.form-container
  position: absolute
  right: 20px
  top: 20px

.form-frame
   text-align: center
   width: 250px

.form-frame.fixed 
  position: fixed
  top: 20px

Answer 1

根据我的经验，打开Chrome开发工具会影响“固定”到屏幕底部的内容。尝试将开发工具弹出到一个单独的窗口中，看看它是否仍然存在问题。

打开影响DOM中div的开发人员工具

1 个答案: