Reputation: 953
My site has a fixed menu at the top, I used the sticky plugin however I want to disable this function in mobile.
Is it possible to hide or disable the function with Jquery? To da to do only with the javascript
This is my html code
<div id="fixed-search" class="fixed-search">
<div class="col s12 m6 l2 center-align">
<select id="localizacao" multiple class="dropdown-select">
<option value="" disabled selected>Finalidade</option>
<option value="1">Venda</option>
<option value="2">Aluguel</option>
<option value="3">Aluguel Temporada</option>
</select>
</div>
<div class="col s12 m6 l2 center-align">
<select id="localizacao" multiple class="dropdown-select">
<option value="" disabled selected>Localização</option>
<option value="1">Capão da Canoa</option>
<option value="2">Torres</option>
<option value="3">Tramandaí</option>
</select>
</div>
<div class="col s12 m6 l2 center-align">
<select id="bairro" multiple class="dropdown-select">
<option value="" disabled selected>Bairro</option>
<option value="1">Centro</option>
<option value="2">Zona nova</option>
<option value="3">Guarani</option>
</select>
</div>
<div class="col s12 m6 l2 center-align">
<select multiple class="dropdown-select">
<option value="" disabled selected>Dormitórios</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4 ou +</option>
</select>
</div>
<div class="col s12 m6 l2 center-align">
<select multiple class="dropdown-select">
<option value="" disabled selected>Dormitórios</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4 ou +</option>
</select>
</div>
<div class="col s12 m6 l2 center-align">
<select multiple class="dropdown-select">
<option value="" disabled selected>Dormitórios</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4 ou +</option>
</select>
</div>
</div>
And this is my Jquery
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#fixed-search").sticky();
}
$("#fixed-search").sticky({topSpacing:10});
In this image you can see the fixed menu above the other items
I solved the issue with
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}else{
$("#fixed-search").sticky({topSpacing:10});
}
Upvotes: 2
Views: 983
Reputation: 2038
Use BOM object to find the with of device based on the device with apply what changes you want to implement Write below code in js
if(window.innerWidth < 767) {
$("#fixed-search").sticky();
} else {
$("#fixed-search").sticky({topSpacing:10});
}
Upvotes: 3
Reputation: 313
I wouldn't use the user agent. You can use Media Queries. https://www.w3schools.com/howto/howto_js_media_queries.asp
Upvotes: 3