根據父級的當前寬度將元素追加到父級並定位

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);
    });

演示JSfiddle

Answer 2

您在append（）中的雙引號內使用雙引號

應該是這樣

$(".progress-bar").append("<div style='position:absolute; left:xxxx%'>*</div>");