HTML/CSS/JS/JQUERY：即使调整 window 的大小也使对象固定

Question

我目前正在尝试制作一些带有框的范围滑块，这些滑块显示滑块的当前值。由于互联网上的所有方法都不起作用，我只是尝试用滑块拇指移动一个盒子。但是，当我的 window 较小时，这些框就不在正确的位置，当我调整 window 的大小时，它们会四处移动。有谁知道我如何将它们放在正确的位置，即使 window 变小或调整大小了？？

这是我的代码（这只是为了测试，绝对不是完美的或最终的）：

<html>

<head>
    <title>Home</title>

    <!-- CSS -->
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

    <div id="login-box">
        <div id="logo"><img border="0" src="logo.png"></div>
        <div id="text_boost">Boost your account now!</div>

        <div id="slider1"><input id="range1" type="range" min="10" max="100" value="0" step="1" onchange="change(1)"></div>
        <div id="slider2"><input id="range2" type="range" min="0.5" max="4" value="0" step="0.5" onchange="change(2)"/></div>
    </div>


    <div id="sliderInfo1" class= "ui-widget-content" style="background-color: #d9d9d9; border-radius:10px; width: 59px;
                                                          height: 22px; text-align:center; display: table">
        <span style="line-height: 22px"></span>
        <div style="display: table-cell; vertical-align: middle; text-align: center; font-size:12px;"><span id="slider_1">10.000</span></div>
    </div>

    <div id="sliderInfo2" class= "ui-widget-content" style="background-color: #d9d9d9; border-radius:10px; width: 59px;
                                                          height: 22px; text-align:center; display: table">
        <span style="line-height: 22px"></span>
        <div style="display: table-cell; vertical-align: middle; text-align: center; font-size:12px;"><span id="slider_2">500</span></div>
    </div>

<script type="text/javascript">
    var newPoint, newPlace, offset;

    var savedOffset_1 = document.getElementById("sliderInfo1").getBoundingClientRect().top - 
                    document.getElementById("range1").getBoundingClientRect().top;
    change(1);

    var savedOffset_2 = document.getElementById("sliderInfo2").getBoundingClientRect().top - 
                    document.getElementById("range2").getBoundingClientRect().top;
    change(2);

    function change (id) { 
        var el = $("#range" + id);
        var top = el.position().top;
        var left = el.position().left;

        var bodyRect = document.getElementById("range" + id).getBoundingClientRect(),
            elemRect = document.getElementById("sliderInfo" + id).getBoundingClientRect(),
            offset_2   = elemRect.left - bodyRect.left;

        if(id == 1) {
            offset_1 = savedOffset_1;
        } else if(id == 2) {
            offset_1 = savedOffset_2;
        }

        // Measure width of range input
        var width = 430;

        // Figure out placement percentage between left and right of input
        newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));

        offset = -1;

        // calculate new box place
        if (newPoint < 0) { 
            newPlace = 0;
        } else if (newPoint > 1) { 
            newPlace = (bodyRect.left - width); 
        } else { 
            newPlace = width * newPoint + left + width + (59 / 2); 
            offset -= newPoint; 
        }

        // move box
        $("#sliderInfo" + id).css({ position: "fixed", left: newPlace, marginLeft: offset + "%", top: top - offset_1 - 5 + "px",
                                width: 59 + "px", height: 22 + "px", display: "table", fontSize: 12 + "px", 
                                backgroundColor: "#d9d9d9", borderRadius: 10 + "px", verticalAlign: "middle", textAlign: "center",
                                lineHeight: 22 + "px"})
                         .text(numberWithCommas(el.val() * 1000));

    }

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    </script>
</body>

我的CSS： http://pastebin.com/rASpFWjN

Answer 1

通过将它们定位为固定的，您还必须捕获 window.onresize 和 window.onscroll 事件，并相应地定位您的标签。这是因为 position: fixed 将始终相对于您的浏览器视口。因此，带有 position: fixed; top: 100px; left: 100px 的元素将始终距离 window 的左上角 100 像素，无论 window 有多大或滚动了多少。

但是，在您的情况下，使用 position: fixed 会使代码不必要地复杂化。您可以将标签放置在滑块 div 中，这样它们将始终相对于滑块。

<div id="slider1">
  <div id="sliderInfo1" class="sliderInfo">
    <span id="slider_1">10.000</span>
  </div>

  <input id="range1" type="range" min="10" max="100" value="0" step="1" />
</div>

<div id="slider2">
  <div id="sliderInfo2" class="sliderInfo">
    <span id="slider_2">500</span>
  </div>

  <input id="range2" type="range" min="0.5" max="4" value="0" step="0.5" />
</div>

这也意味着您必须在 javascript 中进行更少的位置计算。

function change(id) {
  var thumbWidth = 28;
  var el = $("#range" + id);
  var inputWidth = el.width() - thumbWidth;
  var newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
  var newPlace = inputWidth * newPoint;

  // add half the thumb width to the new left to position correctly.
  newPlace += (thumbWidth / 2);    

  $("#sliderInfo" + id).css({
    left: newPlace,
  }).text(numberWithCommas(el.val() * 1000));
}

https://jsfiddle.net/dnm7qr6j/

上的完整示例

HTML/CSS/JS/JQUERY：即使调整 window 的大小也使对象固定

HTML/CSS/JS/JQUERY: Make objects fixed even if the window is resized

html

javascript

css

jquery

fixed