將元素附加到父級和父級當前寬度的位置

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 + '%'}); 
    } 

}()); 

我想要做的是追加一個元素，以可視化方式指示與進度條有關的書籤位置。所以我們假設當我點擊書籤按鈕/鏈接時，我想在進度條下面添加一個asterix（*）。

要做到這一點，我需要使用當前的進度條寬度的方式並用它來設置附加的元素位置，這是我，但不知道如何應用在追加內容。

$('#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

Answer 2

您正在使用的append（）的雙引號

它應該像這裏面的雙引號，

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