Change dropdown on window scroll

show/hide div on scroll position
show hide div on scroll position codepen
hide div on scroll down show on scroll up
show/hide div on scroll position css
hide header on scroll down show on scroll up bootstrap
show navbar on scroll down
scrolling navigation bar
show header on scroll down

When I change select it will scroll accordingly to the div and it is working fine, But how to I change select on document scroll ?

$("select").change(function(){
  var divid = $(this).val();
  $('html, body').animate({
        scrollTop: $("." + divid).offset().top
    }, 2000);
});
div{
  height:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="div1">div1</option>
  <option value="div2">div2</option>
  <option value="div3">div3</option>
  <option value="div4">div4</option>
</select>

<div class="div1">
div1
</div>

<div  class="div2">
div2
</div>

<div  class="div3">
div3
</div>

<div class="div4">
div4
</div>

You can put all the options into array and check it with the window scroll, this way you can have dynamic divs and also you can check them all at once.

$("select").change(function() {
  var divid = $(this).val();
  $('html, body').animate({
    scrollTop: $("." + divid).offset().top
  }, 2000);
});

var output = [];

$.each($("select option"), function(key, value) {  
  output.push(value.value);
});

$(window).on('scroll', function() {
  //checking if it is already in animation mode or not
  if (!$("html,body").is(':animated')) {
    var filtered = output.filter(a => {
      return $(this).scrollTop() >= $("." + a).position().top
    });

    //checking which options are meeting with the requirement
    if (filtered.length > 0) {   
      //selecting the last one.
      $("select").val((filtered[filtered.length - 1]))
    }
  }
});
div {
  height: 300px;
}

select {
  position: fixed;
  top: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="div1">div1</option>
  <option value="div2">div2</option>
  <option value="div3">div3</option>
  <option value="div4">div4</option>
</select>

<div class="div1">
  div1
</div>

<div class="div2">
  div2
</div>

<div class="div3">
  div3
</div>

<div class="div4">
  div4
</div>

On Scroll change dropdown menu drop position, $(".dropdown-toggle").click(function(){ // get the scollTop (distance scrolled from top) var scrollTop = $(window).scrollTop(); // get the top offset of the dropdown  Under the "Scroll and zoom" section, use the drop-down menu to select the Down motion scrolls down option. Once you complete the steps, using the scrolling up gestures on your touchpad will scroll

Disabling window scroll when scrolling inside the select · Issue #889 , joallard changed the title should disable windows/document scroll when joallard added dropdown proposed code ux issue enhancement labels on Apr 1,​  To switch which does what, all I need to do is locate the drop-down menu right below the line that says “Select your Primary Button.” I’ll click it and choose either the left or the right. I’ll click it and choose either the left or the right.

Even if I recommend to use a plugin to avoid any inconsistencies, a quick solution is shown below. It extracts the index of the focused div, and changes the value of the select dropdown. However, this solution is only limited to focus events.

 $('div[value^="div"]').on('focus',function(e){
        let selectedIndex = $(this).prop('class').match(/\d+/g)[0] - 1;
        $('select').prop('selectedIndex', selectedIndex);
});

How To Hide Menu on Scroll, When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ var prevScrollpos = window.pageYOffset; window.onscroll  To change the direction of your mouse wheel, you need to dig deep into your Windows Registry files. Here’s what you need to do: Press Windows key + R to open a Run dialog. Type in “ devmgmt.msc ” and hit Enter.

How To Shrink a Header on Scroll, window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (​document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { Profile settings in Windows Terminal. 06/18/2020; 7 minutes to read; In this article. The settings listed below are specific to each unique profile. If you'd like a setting to apply to all of your profiles, you can add it to the defaults section above the list of profiles in your settings.json file.

How to Close the popup on scroll in Angular DropDownList , By using the hidePopup method in DropDownList, you can close the popup on scroll when triggered the windows scroll event. @Component({ selector: 'app-​root', // specifies the template string for the DropDownList component with change​  // When the user scrolls down 20px from the top of the document, slide down the navbar // When the user scrolls to the top of the page, slide up the navbar (50px out of the top view)

Solution For Very Long Dropdown Menus, That is, below the visible area of the browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it's not a big deal. Set a maximum height to the dropdowns; On hover, reveal the submenu  For example, the drop-down menus listed under the making of this post ("Category," "Windows topics," etc.) won't stay open long enough for me to click on any of the options. Weirdly enough, not all drop-down menus misbehave in this way; the other ones have the scrolling issue, as mentioned above. I'm very frustrated with this problem.

Comments
  • i do not want to use any other library i just want to use jquery and my divs are dynamic according to content
  • @DhavalPankhaniya It's not another library, it's a native API.
  • can you provide any example ?
  • @DhavalPankhaniya Though a valid answer has been provided, I am also proposing another one with Intersection Observer and scrollIntoView just out of curiosity :)