Question

如何将该按钮从底部定位100像素？我尝试使用CSS将这段代码放置在div中，位置为：absolute;底部：100px；但这行不通... 我猜想这必须通过JavaScrip实现...？有人可以帮忙吗？

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "...", // Facebook page ID
            whatsapp: "...", // WhatsApp number
            call_to_action: "Contacte-nos ?", // Call to action
            button_color: "#A8CE50", // Color of button
            position: "right", // Position may be 'right' or 'left'
            order: "facebook,whatsapp", // Order of buttons
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
<!-- /WhatsHelp.io widget -->

Answer 1

我举了一个例子https://jsbin.com/rujelobexo/edit?html,css,js,output

由于此脚本会在页面内插入标记，因此可以使用CSS设置样式：

#wh-widget-send-button.wh-widget-right {
    bottom: 100px!important;
}

需要ID +类规则，因为您的脚本已经使用！important注入了底部属性：

#wh-widget-send-button {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    z-index: 16000160 !important;
    bottom: 0 !important;
    ...
}

Answer 2

我认为您不需要JavaScript。

您是否尝试过使用position: fixed而不是position: absolute？

这应该足够了：

position: fixed;
bottom: 0;

示例（来自W3Schools）：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

使用JavaScript保证金底部

2 个答案: