Bootstrap-Komprimierung nach der Höhe

Question

Was ich versuche zu erreichen, ist relativ einfach nach einer festgelegten Höhe, die ich suche, um ein Div mit Bootstrap-Standardattributen zu reduzieren. Unten habe ich das Javascript geschrieben, um nach einer eingestellten Höhe auszulösen, aber was ich unsicher bin, ist, wie man den Kollaps mit der ID #more auslöst.

function testScroll(ev) { 
 

 
    if (window.pageYOffset > 1100) alert('User has scrolled at least 400 px!'); 
 
}

<div id="more" class="collapse">test</div>

Answer 1

Sie können die collapse function in den Bootstrap-docs wie definiert verwenden ändern , indem Sie ihm die Element-ID geben. Sie können auch mehr darüber lesen here.

function testScroll(ev){ 
    if(window.pageYOffset>1100) { 
     alert('User has scrolled at least 400 px!'); 
     $('more').collapse('hide'); 
    } else { 
     alert('User has not scrolled at least 400 px!'); 
     $('more').collapse('show'); 
    } 
} 


<div id="more" class="collapse">test</div> 

Answer 2

Wenn ich Sie verstehen, wissen nicht, wie zu wählen und die Klasse des Elements #more

var collapse = function() { 

    // select the element that has the id #more 
    var element = document.getElementById('more'); 

    // now you can, for exemple change its class 
    // that's where you can apply a different css class to collapse the div 
    element.setAttribute('class','anotherClass'); 

}