boostrap içerik hizalanmış tam genişlik elemanı

Question

Kaydırıldığında fixed haline gelen bir div var. Bu div, fixed durumundayken tam genişliğe gitmesini isterim. Ben söz konusu div için width: 100% ayarlayarak bunu yaptım. Sorun, sayfanın içeriğiyle sola gitmek yerine, sayfanın içeriğinin aynı hizaya gelmesini istiyorum. Mevcut html biçimlendirmesini değiştirmeden bunu yapmak istiyorum.

---

Örnek: fixed durumunda ve konumuna getirildiğinde tam genişlik.

Fiddle: https://jsfiddle.net/DTcHh/19335/

---

Örnek: Ben eklerseniz dolgu bu işleri içeriye içeriği getirmek için ayrıldı. Sorun şu ki, soldaki dolgu herhangi bir sayı olabilir - bunun güvenilir bir şekilde çalışması için bir yol var mı?

Fiddle: https://jsfiddle.net/DTcHh/19337/ CSS

---

:

#myDiv.fixed { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

jQuery:

$(window).scroll(function() { 
    if (isScrolledIntoView($('#myDivWrapper'))) { 
    if (!initSet) { 
     initSet = true; 
    } 
    $("#myDiv").removeClass('fixed'); 
    } else if (initSet) { 
    $("#myDiv").addClass('fixed'); 
    } 
}); 

Answer 1

#myDiv'un içine ek bir .container div ekleyin ve dolguyu ne zaman ve ne zaman yapılacağını ayarlayın.

<div id="myDivWrapper"> 
    <div id="myDiv"> 
     <div class="container"> 
     <p> 
      This should be fixed once it comes into view and then goes out of view. 
     </p> 
     </div> 
    </div> 
    </div> 


#myDiv .container { 
    padding: 0; 
} 

#myDiv.fixed { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

#myDiv.fixed .container { 
padding: 0 15px; 
} 

Bu muhtemelen biraz yukarı çekilebilir, ancak sizce bu fikri elde edersiniz.

JSfiddle

Answer 2

sol yazma etmeyin: 0

enter link description here

#myDiv.fixed { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 

Answer 3

Sadece içerik ve pencere kenarı arasındaki ölçüm hesaplamak ve gerektiğinde daha sonra bu şekilde sol dolguya uygulamak gerekir.

var measure = ($(window).width() - ($('#myDiv').offset().left + $('#myDiv').width())); 

$(window).scroll(function() { 
    if (isScrolledIntoView($('#myDivWrapper'))) { 
    if (!initSet) { 
     initSet = true; 
    } 
    $("#myDiv").removeClass('fixed').css('padding-left', 0); 
    } else if (initSet) { 
    $("#myDiv").addClass('fixed').css('padding-left', measure+'px'); 
    } 
}); 

demo Fiddle https://jsfiddle.net/DTcHh/19338/

DÜZENLEME: işaretlemeyi düzenlenirken bir seçenek ise i @Paulie_D yaklaşımını öneriyoruz. Yine de başka bir kapsayıcı eklemeniz gerekmez; yalnızca mevcut işaretlemenize bir sınıf ekleyin.

Demo Fiddle https://jsfiddle.net/DTcHh/19340/

<div id="myDivWrapper"> 
    <div id="myDiv"> 
     <p class="container"> 
     This should be fixed once it comes into view and then goes out of view. 
     </p> 
    </div> 
    </div> 

Answer 4

tüm paragrafları bir container sınıf içinde olduğundan, aynı zamanda da sabit paragrafa bu sınıfı ekleyebilir.

$("#myDiv").removeClass('fixed'); 
    $("#myDiv p").removeClass('container'); 
    ... 
    $("#myDiv").addClass('fixed'); 
    $("#myDiv p").addClass('container'); 

Dahası, tam genişliğini gitmek #myDiv söylemek gerekir:

#myDiv.fixed { 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
} 

örnek here çalışma Bkz.