挤压一个没有响应的网页

squeeze a non-responsive webpage

本文关键字：响应 网页 一个      更新时间：2023-09-26

我有下面的jsfiddle链接

我在哪里试图挤压网页以显示右侧的广告

http://jsfiddle.net/azgjr8k0/

与响应网站配合良好，但在上面给出的fiddle链接中。它不会挤压具有固定宽度的div&非响应站点。不管怎样我都可以，然后让我知道

这是css

#test {
  position:fixed;
  width:160px;
  background:blue;
  right:-160px;
  top:0px;
  bottom:0px;
  -webkit-transition: all ease-in-out 1s;
  -moz-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
 }
#test.show {
  right:0; 
}
#container{
  margin-right:0;
 -webkit-transition: all ease-in-out 1s;
 -moz-transition: all ease-in-out 1s;
 transition: all ease-in-out 1s;
}
#container.squeezed {
  margin-right:160px;
}

javscript/jquery code
  window.onscroll = function () {
    if (pageYOffset > 100) {
      $("#test").addClass("show");
      $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
      $("#test").removeClass("show");
      $("#container").removeClass("squeezed");
   }
 }

以下是解决方案：

http://jsfiddle.net/austinthedeveloper/azgjr8k0/4/

如果你想设置东西的宽度，但让它们做出响应，请确保它们被设置为最大宽度。

#box{
    width: 100%;
    max-width:500px;
}
相关文章：