Question 221268 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Category menu drop-down area Disappears on scroll (BLOGGER)

I have the following problem on my blogger, while I scroll down the categories menu and its dropdown area disappears very early on scrolling down, I am unable to access the entire dropdown menu. How to keep dropdown menu permanently and not disappear before scrolling from view….

MY BLOGGER

https://bloggerdetestes2023.blogspot.com/

I don’t have much experience with programming, so I haven’t tried to do anything to solve my problem yet! I’ve been looking on google! However, I couldn’t find an answer to solve my problem!

Tags:

2

Answers


  1. 0

    The reason is caused by .You need to change the visibility and position. like remove visibility: hidden.

    Login or Signup to reply.
  2. 0

    Here’s my pure JavaScript solution that works if it’s hidden inside a scrollable container too. example: here

    var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode;
  do {
    rect = el.getBoundingClientRect();
    if (top <= rect.bottom === false) return false;
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode;
  } while (el != document.body);
  // Check its within the document viewport
  return top <= document.documentElement.clientHeight;
};

// Stuff only for the demo
function attachEvent(element, event, callbackFunction) {
    if (element.addEventListener) {
        element.addEventListener(event, callbackFunction, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, callbackFunction);
    }
};

var update = function(){
    document.getElementById('console').innerHTML = visibleY(document.getElementById('element2')) 
        ? "Inner element is visible" : "Inner element is not visible";
};
attachEvent(document.getElementById('element1'), "scroll", update);
attachEvent(window, "resize", update);
update();
    #console {
    background-color: yellow;
}
#element1 {
            width: 500px;
            height: 100px;
            background-color: lightblue;
            overflow-y: auto;
            padding-top: 150px;
            margin: 45px;
        }
        
        #element2 {
            margin-top: 110px;
      margin-bottom: 400px;
            width: 400px;
            height: 320px;
            background-color: green;
        }
    <div id="console"></div>
<div id="element1">
    <div id="element2"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search