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

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