2

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

Example

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

}
2
  • 3
    Better to use a media query. User agent detection is unreliable and it also won't work for desktop users who zoom in. Mobile users who request the desktop site will get weird results too. Mar 29, 2018 at 14:00
  • Better to user media queries, Use max-width: 767 it will support upto all mobile widhts
    – Mr.Pandya
    Mar 29, 2018 at 14:03

2 Answers 2

3

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});
}
2
  • I just want to disable the function, but keep the menu. Mar 29, 2018 at 14:13
  • Write whatever code you want in if else. Function code in if and other code in else
    – Mr.Pandya
    Mar 29, 2018 at 14:15
3

I wouldn't use the user agent. You can use Media Queries. https://www.w3schools.com/howto/howto_js_media_queries.asp

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.