Question

我编写了一些可以在此网址上访问的内容。

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>

JQueryCodes

    <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/

我想用红色圆圈打开和关闭面板但是当打开面板时，点击红色圆圈右侧的红色圆圈位置没有改变但是在ie和firefox红色圆圈位置随着父级别位置而变化。打开示例时，请单击屏幕右侧的红色圆圈。谢谢你的有趣每个人的好作品

Answer 1

我认为您不想使用position:fixed，而是使用position:absolute。您还需要将#pnlThematic等父元素设置为position:relative才能使其正常工作。

这是因为您没有尝试将链接固定在页面上，而是相对于父元素。

您需要对css进行一些编辑以使其正常显示，但我认为这基本上就是您的问题所在。

Answer 2

如安德鲁的回答所述，你需要在你的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

注意：而不是固定句柄使父div固定

CSS位置：已修复无法在Chrome中使用

2 个答案: