相关疑难解决方法(0)

如果我在HTML页面中有一个非滚动标题,则固定在顶部,具有已定义的高度:

有没有办法使用URL锚点(#fragment部分)让浏览器滚动到页面中的某个点,但是在没有JavaScript帮助的情况下仍然尊重固定元素的高度？

http://foo.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

我有一种情况,在正常的CSS情况下,固定的div将准确定位在指定的位置(top:0px,left:0px).

如果我有一个具有translate3d变换的父级,这似乎不受尊重.我没有看到什么？我尝试过其他webkit-transform,如样式和变换原点选项,但没有运气.

我已经附加了一个JSFiddle,其中一个示例我希望黄色框位于页面的顶角而不是容器元素的内部.

您可以在下面找到小提琴的简化版本:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.

我正在使用bootstrap来设置模态弹出窗口.单击一个按钮时,模态对话框打开,但整个页面略微"着色",我无法与模态进行交互(页面基本上冻结).你知道为什么会这样吗？这是代码:

按钮:

<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>

模式:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should …

我正面临这个奇怪的问题,看起来像Chrome手机上的一个错误.

我有一个位置的div:固定; 对齐到屏幕的右上角.在桌面上,它在移动设备上工作正常(它保持原位),然而,当我向上或向下滚动时,div正在移动.我制作了一个视频来更好地解释它:

https://www.youtube.com/watch?v=gCgN6ULkcMg

在向上滚动工作正常

在向下滚动时,一个位置为div的div消失在视口外

我试图在小提琴上隔离问题,但无法重现它.因此,我将整个网站封装在一个小提琴中,问题就此停止了.我还是不明白为什么.

网站隔离在一个小提琴:删除*

直播网站:删除*

此外,我在现场网站上对不同的设备进行了一些测试:

• Chrome移动版:错误
• Chrome桌面:工作正常
• Firefox手机:工作正常
• Safari mobile:工作正常

有人可以解释我为什么Chrome Mobile有这个问题,而其他人没有？

我的立场:固定div看起来像这样:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*删除了链接,因为它是客户的网站.解决方案在下面的答案中.

http://workshop.wpcoder.com/daniel/tvexperts/

在Chrome中,如果单击"生产",然后单击"联系",则位置:固定标题消失,但在移动滚轮时返回.我不知道原因是什么,到目前为止我只能在Safari和Chrome中检测到它,但Firefox很好,所以我认为它是一个webkit bug.

这是我遇到过的最奇怪的错误,不幸的是,由于法律限制,我无法向您展示示例图片,但我会尝试尽可能好地解释它.

所以我正在构建这个网站,它通过视口大小的部分进行无限滚动.在第一部分中,我有一个表格和一个html5视频,其背景位置固定在背景中,然后是后续部分的简单背景图像,奇数部分background-attachment: fixed;用于给出一些视差效果.

现在非常奇怪的是:一旦我将第一部分中的一个表单输入聚焦,所有部分都background-attachment: fixed;丢失了它们的背景图像......它仍然在CSS规则中但不会被渲染(只是白色) .

我尝试了几个类似问题的解决方案,比如这个SO线程或这篇帖子.现在第二个最有趣的事情是,如果我添加-webkit-transform或-scale修复具有固定bg图像的部分,问题会立即发生而没有任何聚焦......我真的无法弄清楚这一点.

我希望有人能帮助我解决这个问题,因为拥有像视差这样的行为非常重要.

这是一个显示问题的jsfiddle,不完全像我的页面,但你可以看到错误,在那里显示视频而不是图像,但在我的页面上我将视频设置为滚动到达第二部分后的绝对位置,所以它只是白色......

在我的网站中,我在滚动时遇到页脚问题

http://m.calciomercato.com/

使用谷歌浏览器,滚动期间横幅从下侧"分离".

我试图更新jquery和jquery mobile但没有结果.

谢谢.

当我尝试仅在实时服务器上加载模态表单时，出现奇怪的错误。当我单击此处实时网站上的按钮时，我看到模式弹出一秒钟，但随后它消失并出现奇怪的显示。它似乎完全是间歇性的，而且我对网络开发非常陌生。

我对这里发生的事情做了一个简短的截屏视频

我已经在这里和这里尝试过这些修复

这是我的html：

<!DOCTYPE html>\n<html lang="en">\n<head>\n  <title>James Scaggs Portfolio - JamesScaggs.com</title>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\n  <!-- Latest compiled and minified CSS -->\n  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">\n  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>\n  <!-- Font Awesome CSS -->\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">\n  <!-- Optional theme -->\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">\n  <!-- Latest compiled and minified JavaScript -->\n  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>\n  <!-- Custom CSS -->\n  <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n  <div class="cover">\n    <nav …