javascript - 根据父级的当前宽度将元素附加到父级和位置

Question

我有一个进度条，指示页面的滚动进度。因此，如果我将页面向下滚动一半，进度条宽度将设置为 50%，因此它会根据我在页面上的位置不断变化。

(function(){
    var $w = $(window);
    var $prog = $('.progress-bar');

    var wh, h, sHeight;

    function setSizes(){
        wh = $w.height();
        h = $('#page-content-wrapper').height();
        sHeight = h - wh;
    }

    setSizes();

    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    }).on('resize', function(){
        setSizes();
        $w.trigger('scroll');
    });

    function updateProgress(perc){
        $prog.css({width : perc*100 + '%'});
    }

}());

我想做的是附加一个元素以直观地指示相对于进度条的书签位置。假设我想在单击书签按钮/链接时在进度条下方添加一个星号 (*)。

为此，我需要一种使用当前进度条宽度的方法，并使用它来设置附加元素的位置，我已经有了，但不确定如何在附加上下文中应用它。

$('#bookmark').on("click", function() { 
    $(".progress-bar").append("<div style='position:absolute; left:xxxx%'>*</div>");
});

谢谢

Answer 1

我重写了你的代码:

var w = $(window);
var prog = $('.progress-bar');
var wh, h, sHeight;

function setSizes() {
    wh = w.height();
    h = $('.text')
        .height();
    sHeight = h - wh;
}
setSizes();
w.on('scroll', function () {
        var perc = Math.max(0, Math.min(1, w.scrollTop() / sHeight));
        updateProgress(perc);
    })
    .on('resize', function () {
        setSizes();
        w.trigger('scroll');
    });

function updateProgress(perc) {
    prog.css({
        width: parseInt(perc * 100, 10) + '%'
    });
    if (perc <= 0) $('#c')
        .hide();
    else $('#c')
        .show(500);
}
$('#c')
    .hide();
$('#c')
    .click(function () {
        $('.star')
            .remove();
    });
$('.bk')
    .click(function () {
        var add = "";
        l = prog.width() - 10;
        t = prog.height() / 2;
        add = "<div class=\"star\" style=\" left:";
        add += l;
        add += "px; top:";
        add += t;
        add += "px;\">*</div>";
        $('body')
            .append(add);
    });

Demo JSfiddle