Johann-S/bs-breakpoints

Conditional

Closed this issue · 5 comments

protasisimone commented

How to use this with conditional?

Ex. if( bsBreakpoints() == "xs" ) { // do something } else { // do something }

Thanks

Johann-S commented

Hi @protasisimone,

You have to use this method: detectBreakpoint
See: https://github.com/Johann-S/bs-breakpoints#detectbreakpoint

like that:

if (bsBreakpoints.detectBreakpoint() === 'xSmall') {
protasisimone commented

Thanks for ur reply, I try this:

var header = $("#navbar");
$(window).scroll(function() {
	bsBreakpoints.init();
	var scroll = $(window).scrollTop();
	if ( bsBreakpoints.detectBreakpoint() === 'medium' ) {
		header.removeClass("navbar-dark bg-secondary").addClass("navbar-light bg-white");
	} else if ( scroll >= 195 ) {
		header.removeClass("navbar-light bg-white").addClass("fixed-top navbar-dark bg-secondary");
	} else {
		header.removeClass("fixed-top navbar-dark bg-secondary").addClass("navbar-light bg-white");
	}
});

But doesn't work.

Johann-S commented

To validate this condition:
if ( bsBreakpoints.detectBreakpoint() === 'medium' ) {

Your screen width has to be between 768px and 991px, and you have to scroll.
init should be called on document ready

Johann-S commented

I hope you find a solution @protasisimone 👍

protasisimone commented

Thanks for ur reply, have a nice day! 🙏

  • ❤️1