javascript - 保持元素与 slider 居中(同时跟随)

Question

是的，我有一个问题可以帮助解决这个问题，那就是让一个 div 跟随 slider 旋钮。经过一段时间的摸索，我们找到了解决方案。现在我在 slider 旋钮后面有一个 div，我需要它始终位于其中心。

因此，为了尽可能简单，这里是我正在尝试修复的问题的图像。

在上图中，您可以看到 slider 和 slider 旋钮后面的 div。在它下面我有一些地方 | 所以你可以看到它没有与 slider 旋钮完全居中。我需要它始终位于 slider 旋钮下方的中心(在图像中它应该位于灰色位的下方/中间)。当 40% 及以下以及 60% 及以上时，它往往会开始困惑。

我尝试过的:

我想不出一个简单的方法来解决这个问题(因此这篇文章)，但我确实通过执行以下操作尝试了一些作弊:

if (pct >= 80) {
    // Position the follow div and arrow
    $('#follow').css('left', (o.value * 0.98) + '%');
} else if (pct >= 70) {
    $('#follow').css('left', (o.value * 0.99) + '%');
} else if (pct <= 50 & pct >= 40) {
    $('#follow').css('left', (o.value * 1.02) + '%');
} else if (pct <= 40 & pct >= 30) {
    $('#follow').css('left', (o.value * 1.04) + '%');
} else if (pct <= 30 & pct >= 20) {
    $('#follow').css('left', (o.value * 1.08) + '%');
}

现在，它尝试通过在移动时更改 % 来使 div 与 slider 保持在轨道上。这确实有效(有点)，但会导致 div 不平滑，并且由于计算修正而变得不稳定。

这是我迄今为止所拥有的示例:

HTML:

<div class="slider-container">
    <div id="follow-container">
        <div id="follow">I am following the slider!
            <br />
            <div id="percentage"></div>
            <br />|</div>
    </div>
    <div id="testslider"></div>
</div>

CSS:

#testslider {
    position: absolute;
    top: 50px;
    left: -40px;
    background-size: 100%;
    background-position: center;
}
.slider-container {
    padding: 55px;
}
#follow-container {
    position: relative;
    left: -65px;
    bottom: 2px;
}
#follow {
    position: absolute;
    width: 193px;
    height:40px;
    margin-left: -77px;
    /* half width */
    text-align: center;
    color: black;
    border: 1px solid;
}

JavaScript:

$('#testslider').sGlide({
    height: 16,
    startAt: 70,
    colorStart: '#C6F1F8',
    colorEnd: '#C6F1F8',
    drag: function (o) {
        var pct = Math.round((o.value));
        $('#percentage').html(pct);

        // Position the follow div and arrow
        $('#follow').css('left', o.value + '%');

    },
    onButton: function (o) {
        var pct = Math.round(o.value) + '%';
        $('#percentage').html(pct);
    }
});

DEMO HERE

这里的任何帮助都会很棒，正如人们之前所说的“那么你的问题是什么”。

总体问题:如何使以下 div 与 slider 旋钮对齐？

Answer 1

我能看到它工作的唯一方法是将 | 包装在 span 类中!!

working fiddle

HTML

<span class="vline"><br />|</span>

CSS

#follow > span.vline {
    position: relative;
    left:4%;
}

编辑

根据评论讨论，这可能是你的宝藏!!

solution (基于你的问题 fiddle ，而不是我第一次尝试 fiddle )

CSS

 #follow-container {
        position: fixed; /*changed*/
        left:50%; /* change as per your need, left:60%; would make it 
 center to the full 100% width*/
        margin-left:-96px; /*half of divs width*/
    }