jquery - CSS 位置 :fixed not working in Chrome

Question

我编写了一些可以访问这个 url 的东西。

CSS 代码

   #hideshow {
    background-image: url("../img/thematic.png");
    position: fixed;
    background-color: aliceblue;
    background-size: cover;
    border-radius: 100px 0px 10px 100px;
    padding: 2px 4px 2px 4px;
    width: 10px;
    height: 40px;
    cursor: pointer;
    opacity: 0.7;
    box-shadow: 2px 2px 2px #888888;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    z-index: 1;
}

#pnlThematic {
    width: 150px;
    height: 300px;
    margin-left: 150px;
    border: dotted;
}

#pnlThematicParent {
    width: 150px;
    height: 300px;
}

HTML:

<div id="pnlThematicParent">
        <div id="pnlThematic">
            <a id="hideshow">aa</a>
            <h3>Section 1</h3>             
        </div>
    </div>

JQuery 代码

    <script type="text/javascript">
    $(document).on("ready", function () {
        var wWidth = $(document).width();

        var pnlThematicWidth = $("#pnlThematicParent").outerWidth();
        $("#pnlThematicParent").css({ 'margin-left': wWidth - (pnlThematicWidth - 8), 'overflow': 'hidden' });

        var elementWidth = $("#hideshow").width();
        $("a").css({ 'margin-left': -(elementWidth * 2) });

        $("a").on("click", function (ev) {
            var isVisible = $(ev.target).parent().is(":visible");
            $(ev.target).parent().animate({
                marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
            });
        });
    });
</script>

http://jsfiddle.net/Y3DS3/7/

我想用红色圆圈打开和关闭面板，但是当通过单击屏幕右侧的红色圆圈打开面板时，chrome 红色圆圈的位置没有改变，但在 ie 和 firefox 中，红色圆圈的位置随着父 div 的位置而改变。打开示例时，请单击屏幕右侧的红色圆圈。 谢谢你的有趣 祝大家好运

Answer 1

正如 Andrew 的回答中提到的，您需要更改您的 css

CSS

#hideshow {
      background-color: #F0F8FF;
      background-image: url("https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg");
      background-size: cover;
      border-radius: 100px 0 10px 100px;
      box-shadow: 2px 2px 2px #888888;
      cursor: pointer;
      height: 40px;
      left: -20px;
      opacity: 0.7;
      padding: 2px 4px;
      position: absolute;
      transition: opacity 0.5s ease 0s;
      width: 10px;
    }

    #pnlThematic {
      border: medium dotted;
      height: 100%;
      left: 0;
      position: relative;
      top: 0;
      width: 100%;
    }
    #pnlThematicParent {
      height: 300px;
      position: fixed;
      right: 0;
      width: 150px;
    }

你的脚本也有一点变化

脚本

var wWidth = $(document).width();

$('#pnlThematic').css({marginLeft:  -(parseFloat($('#pnlThematic').css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()});

var elementWidth = $("#hideshow").width();

$("a").on("click", function (ev) {
    var isVisible = $(ev.target).parent().is(":visible");
    $(ev.target).parent().animate({
        marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
    });
});

工作 fiddle

注意:不要让 handle fixed 让 parent div fixed